ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Vue tree, передача параметров в компонент.
4 сообщений из 4, страница 1 из 1
Vue tree, передача параметров в компонент.
    #39775419
ncux199rus
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ncux199rus
Гость
Добрый день.
Пытаюсь модернизировать пример дерева из мануала vue .
При передаче параметра через props он его не видит и падает с ошибкой "ReferenceError: typeD is not defined".
v-bind - на 50 строке
props - 100 строка
объявление typeD - 158.
Если в компоненте в props раскомментировать typeD, то ошибка пропадает но данные все равно не передаются.
Делал по инструкции .
 
Код: html
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.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

    <style type="text/css">
        body {
        font-family: Menlo, Consolas, monospace;
        color: #444;
        }
        .item {
        cursor: pointer;
        }
        .bold {
        font-weight: bold;
        }
        ul {
        padding-left: 1em;
        line-height: 1.5em;
        list-style-type: dot;
        }
    </style>
</head>
<body>
     <!-- item template -->
          <script type="text/x-template" id="item-template">
            <li>
              <div              
                class="itemList"
                :class="{bold: isFolder}"              
                @click="toggle"
                >
                {{ model.name }}
                <span v-if="isFolder">{{ open ? '&#8595;' : '&rarr;' }}</span>
                <span v-if="isFolder" v-if="open">
                  
                </span>
              </div>
              <ul v-show="open" v-if="isFolder">
                  debugger
                <item
                  class="item"
                  v-for="(model, index) in model.children"
                  :key="index"
                  :model="model"               
                  v-bind:typeTree="typeD"
                  >                  
                </item>
                <!-- <li class="add" @click="addChild">+</li> -->
              </ul>
            </li>
          </script>  
          <!-- the demo root element -->
          <ul id="vueTree">
            <item
              class="item"
              :model="treeData">
            </item>
          </ul>
        </div>

    <script>
        // demo data
    var data = {
    name: 'My Tree',
    children: [
        { name: 'hello' },
        { name: 'wat' },
        {
        name: 'child folder',
        children: [
            {
            name: 'child folder',
            children: [
                { name: 'hello' },
                { name: 'wat' },
            ]
            },
            { name: 'hello' },
            { name: 'wat' },
            {
            name: 'child folder',
            children: [
                { name: 'hello' },
                { name: 'wat' },
            ]
            }
        ]
        }
    ]
    }

    // define the item component
    Vue.component('item', {
  template: '#item-template',
  props: {
    model: Object,
    typeTree: '',
    //typeD: '',
  },
  data: function () {
    return {
      open: false,
      typeView: this.typeTree,
    }
  },
  computed: {
    isFolder: function () {
      return this.model.children &&
        this.model.children.length
    }
  },
  methods: {
    toggle: function () {
      if (this.isFolder) {
        this.open = !this.open
      }else {
        console.log('vue data before =', this.typeView)
        
        if (this.model.typeView === "map") {
          this.typeView = "passportObject"
        } else {
          this.typeView = "map"
        }

        console.log('vue data after=', this.typeView)
        eventBus.$emit("choiceObject", this.typeView);
      }
    },
    changeType: function () {
      if (!this.isFolder) {
        Vue.set(this.model, 'children', [])
        this.addChild()
        this.open = true
      }
    },
    addChild: function () {
      this.model.children.push({
        nodename: 'new stuff'
      })
    }
  }
})

// boot up the demo
function callVue(listTree){
  demo.treeData = listTree
}

const demo = new Vue({
    el: '#vueTree',
    data: {
      treeData: data,      
      typeD: 'map',
    },
  })
</script>
</body>
</html>

...
Рейтинг: 0 / 0
18.02.2019, 11:26
| Ответить | Цитировать | Написать  
Vue tree, передача параметров в компонент.
    #39775455
Лысый дядька
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Лысый дядька
Участник
ncux199rus,

вроде работает

...
Рейтинг: 0 / 0
18.02.2019, 12:11
| Ответить | Цитировать | Написать  
Vue tree, передача параметров в компонент.
    #39775496
ncux199rus
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ncux199rus
Гость
Лысый дядька,
по мануалу typeD не надо обозначать в props.
и в консоле при нажатии на элемент (hello, wat) значение before data выводится undefined, хотя в экземпляре data: {typeD: "map"}.
Вот не могу понять в чем проблема.
...
Рейтинг: 0 / 0
18.02.2019, 12:54
| Ответить | Цитировать | Написать  
Vue tree, передача параметров в компонент.
    #39775524
Лысый дядька
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Лысый дядька
Участник
ncux199rus,

Я, признаться, вуй не знаю, он мне кажется дебильной лапшой после ангуляра, просто хотел вам помочь и не нашел в представленном мануале, из чего вытекает, что
ncux199rustypeD не надо обозначать в props
покажите конкретное место.
...
Рейтинг: 0 / 0
18.02.2019, 13:14
| Ответить | Цитировать | Написать  
4 сообщений из 4, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Vue tree, передача параметров в компонент.
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
NoSQL.ru       Новости, Чат       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=39775419&tid=1443867]:
 0ms
get settings:
 11ms
get forum list:
 13ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 208ms
get topic data:
 11ms
get forum data:
 2ms
get page messages:
 41ms
get tp. blocked users:
 2ms
others: 252ms
total:  548ms
созд. / загр.: 548ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]