Передача строки категории товара в другой компонент

@pirat2k · Регистрация: 18.09.2012

Студворк — интернет-сервис помощи студентам

Здравствуйте, хочу при нажатии на категорию товара передавались данные из catalog.vue в tovar.vue.
catalog.vue

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<template>
  <div class="root">
    <div class="title">Выберите категорию</div>
    <div class="search">
      <div class="pole"><input type="text" class="inp" placeholder="Категория товара" v-model="categparam"></div>
      <div class="btn"><ion-icon name="search-sharp" v-on:click="CategorySel()"></ion-icon></div>
    </div>
    <router-link to="/catalog/tovar">
    <div class="categ">
      
      <div v-for= "naim in categ" v-bind:key= "naim.id" class="cat" v-on:click="openTov('naim.NaimCateg')">         
        <div class="photo" v-bind:style='"background-image: url(" +naim.Photo+ ")"'></div>
        <div class="opis">
            <div class="naim" ><a>{{naim.NaimCateg}}</a></div> 
            
          </div>  
            
    </div>
      
  </div>
     <tovar-item v-bind:itemCateg= 'itemCateg' v-show="false"/>
  </router-link>
    
  </div>
 
</template>
 
<script>
import axios from "axios"
import tovar from "../scripts/tovar.vue"
export default {  
name:"category",
data(){return{categ:{},categparam:"",itemCateg:""}},
components:
{
 'tovar-item':tovar
},
 
methods:
{
 openTov:function(param)
 {
   
    this.$emit("click",param)
 },

tovar.vue

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<template>
  <div class="root">
    <div class="leftpanel">
      <div class="filter">
        <div><a>Стоймость</a></div>
        <div><input type="text" value="0"> - <input type="text" value="100"> руб.</div>
      </div>
      <div><button>Подобрать</button></div>
     <div class="group">
       <!--  -->
     </div>
      </div>
      <div class="tovar" v-for= "tov in tovarNaim" v-bind:key= "tov.idTov"> 
          <div><a>{{tov.Naim}}</a></div>
          <div><a>{{tov.NaimCateg}}</a></div>
          <div><a>{{itemCateg}}</a></div>
      </div>
       
      </div>
</template>
 
<script>
import axios from 'axios'
 
export default {
name:"tovar",
data()
{
  return{tovarNaim:{}}
},
props:
{
  itemCateg:{type:String,required:true}
},

Как привязать обработчик клика что при нажатии на нужную категорию товара данные переходили в товар. При попытке перейти пишел undefined.

@pirat2k · 18.05.2020, 22:03 **[ТС]**

Это мне нужно чтобы вывести товары которые находятся в данной категории при помощи Axios.

@MrOnlineCoder · 19.05.2020, 00:00

pirat2k, рауты типа /category/tovar могут принимать параметры:

router.js

JavaScript
1
2
3
4
{
  path: '/category/:name',
  component: Tovar
}

и после этого вы можете получить доступ к категории в Tovar.vue, например перейдя по ссылке /category/sofa

JavaScript
1
this.$route.params.name; //=== 'sofa'

Используя этот параметр вы можете сделать соответсвтующий запрос на сервер через Axios чтобы загрузить товары выбранной категории

@pirat2k · 19.05.2020, 12:39 **[ТС]**

Сообщение от MrOnlineCoder

1
this.$route.params.name; //=== 'sofa'

Это строчка должна быть в компоненте catalog.vue?
и Значит через пропсы пробрасывать значение переменной категории товара в tovar.vue?

Добавлено через 1 минуту
Или как это сделать лучше?

@pirat2k · 19.05.2020, 16:56 **[ТС]**

вот мой роутер:

JavaScript
1
2
3
4
5
6
7
8
9
10
const router=new VueRouter({
   
    mode:"hash",
    routes: [
      { path: '/',naim:'Main',component:Main },
      { path: '/shops',naim:'Shops',component:Shops},
      {path: '/catalog',name:'Catalog',component:Catalog},
      {path: '/catalog/tovar/:item',name:'Tovar',component:tovar},      
    ],
  })

компонент catalog

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<template>
  <div class="root">
    <div class="title">Выберите категорию</div>
    <div class="search">
      <div class="pole"><input type="text" class="inp" placeholder="Категория товара" v-model="categparam"></div>
      <div class="btn"><ion-icon name="search-sharp" v-on:click="CategorySel()"></ion-icon></div>
    </div>
    <router-link to=/catalog/tovar/:item >
    <div class="categ">
      
      <div v-for= "naim in categ" v-bind:key= "naim.id" class="cat" v-on:click="openTov(naim.NaimCateg)">         
        <div class="photo" v-bind:style='"background-image: url(" +naim.Photo+ ")"'></div>
        <div class="opis">
            <div class="naim" ><a>{{naim.NaimCateg}}</a></div> 
            
          </div>  
            
    </div>
      
  </div>
    
  </router-link>
    
  </div>
 
</template>
 
<script>
import axios from "axios"
import tovar from '../scripts/tovar.vue'
import content from '../scripts/content.js'
export default {  
name:"category",
data(){return{categ:{},categparam:"", item:""}},
 
created()
{  
  this.NaimCategory()
},
 
methods:
{
 openTov:function(param)
 {
   this.item=param
    
    
    
 },

компонент Tovar

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<template>
  <div class="root">
    <div class="leftpanel">
      <div class="filter">
        <div><a>Стоймость</a></div>
        <div><input type="text" value="0"> - <input type="text" value="100"> руб.</div>
      </div>
      <div><button>Подобрать</button></div>
     <div class="group">
       <!--  -->
     </div>
      </div>
      <div class="tovar" v-for= "tov in tovarNaim" v-bind:key= "tov.idTov"> 
          <div><a>{{tov.Naim}}</a></div>
          <div><a>{{tov.NaimCateg}}</a></div>
          <div><a>{{itemCateg}}</a></div>
      </div>
       
      </div>
</template>
 
<script>
import axios from 'axios'
 
export default {
name:"tovar",
data()
{
  return{tovarNaim:{}}
},
 
 
created()
{
 this.tovar() 
 this.link()
},
methods:
{
  link()
  {
    console.log(this.$route.param.item)
  },

выводит ошибку.

@MrOnlineCoder · 19.05.2020, 18:14

pirat2k,

JavaScript
1
<router-link to=/catalog/tovar/:item >

вместо :item нужно писать именно название категории.

JavaScript
1
console.log(this.$route.param.item)

params

@pirat2k · 19.05.2020, 18:58 **[ТС]**

Сообщение от MrOnlineCoder

вместо :item нужно писать именно название категории.

Это понятно, а если щелкнуть на нужную категорию то как передать тогда значение? Пробовал просто naim.NaimCateg на текст или при клике чтобы значение передавалось в переменную и эту переменную в ссылку то не работает.

@MrOnlineCoder · 19.05.2020, 19:06

Сообщение от pirat2k

Пробовал просто naim.

покажите как

@pirat2k · 19.05.2020, 19:13 **[ТС]**

Сообщение от MrOnlineCoder

покажите как

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="categ">
      
      <div v-for= "naim in categ" v-bind:key= "naim.id" class="cat" v-on:click="openTov(naim.NaimCateg)">  
        <router-link to=/catalog/tovar/:naim.NaimCateg>       
        <div class="photo" v-bind:style='"background-image: url(" +naim.Photo+ ")"'></div>
        <div class="opis">
            <div class="naim" ><a>{{naim.NaimCateg}}</a></div> 
            
          </div>  
           </router-link> 
    </div>
      
  </div>

@MrOnlineCoder · 19.05.2020, 21:27

pirat2k,

JavaScript
1
<router-link to="{name: 'tovar', params: {name: naim.NaimCateg}}">

только в настройках router укажите name для этого раута

Больше информации здесь: https://router.vuejs.org/ru/api/#to

@pirat2k · 19.05.2020, 22:02 **[ТС]**

Сообщение от MrOnlineCoder

только в настройках router укажите name для этого раута

Да так и получилось, с этого видео перенял

Code
1
https://youtu.be/Hv5SM19oQ6w?t=366

Новые блоги и статьи Все статьи Все блоги /
Отчёт о спецтехнике находящейся в ремонте Maks 20.04.2026 Отчёт из решения ниже размещен в конфигурации КА2. Задача: отобразить спецтехнику, которая на данный момент находится в ремонте. Есть нетиповой документ "Заявка на ремонт спецтехники" который. . .	Памятка для бота и "визитка" для читателей "Semantic Universe Layer (Слой семантической вселенной)" Hrethgir 19.04.2026 Сгенерировано для краткого описания по случаю сборки и компиляции скелета серверного приложения. И пусть после этого скажут, что статьи сгенерированные AI - туфта и не интересно. И это не реклама -. . .	Запрет удаления строк ТЧ документа при определенном условии Maks 19.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "Аккумуляторы", разработанного в конфигурации КА2. У данного документа есть ТЧ, в которой в зависимости от прав доступа. . .	Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .
Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .	Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .

@pirat2k 11 / 11 / 8 Регистрация: 18.09.2012 Сообщений: 514
	18.05.2020, 22:03 [ТС]
	Это мне нужно чтобы вывести товары которые находятся в данной категории при помощи Axios. 0