Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Vue.js / 4 сообщений из 4, страница 1 из 1
26.02.2020, 10:59
    #39930946
SQL-Talker
SQL-Talker
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Vue.js
Я новичок в работе с фреймворком Vue.js, я только изучаю его.
Пытаюсь реализовать очень простую идею, но она не работает.
Вот код приложения Vue:
Код: 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.
<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
    <div id="app">
        <button @click="editItem(0)">Edit item</button>
        <app-edit :item="itemEdt"></app-edit>
    </div>

    <script>
        // editor component
        let appEdit = {
            props: ['item'],
            template: `
            <div>
                <input type="number" v-model="id">  <input type="text" v-model="name">
            </div>
            `,
            data() {
                return {
                    id: this.item.id,
                    name: this.item.name
                }
            },
        }

        // Vue instance
        new Vue({
            el: '#app',
            data: {
                items: [{
                    id: 0,
                    name: 'Some item'
                }],
                itemEdt: {
                    id: null,
                    name: null
                },
            },
            components: {
                'app-edit': appEdit,
            },
            methods: {
                editItem(id) {
                    this.itemEdt = this.items[this.items.findIndex(item => item.id === id)];
                    console.log(this.itemEdt);
                },
            },
        });
    </script>
</body>
</html>



Я ожидаю, что элементы ввода будут заполнены при нажатии на кнопку, но этого не происходит.
Идея в том, что я укажу объект, который связан со свойством item, и входные данные будут заполнены значениями.
В чем ошибка, чего я недопонимаю?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
26.02.2020, 16:06
    #39931137
Агнец за бортом
Агнец за бортом
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Vue.js
SQL-Talker,

Всё плохо.

Но вот это

Код: javascript
1.
2.
3.
4.
5.
6.
  data() {
                return {
                    id: this.item.id,
                    name: this.item.name
                }
            },



точно лишнее
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
26.02.2020, 16:08
    #39931138
Агнец за бортом
Агнец за бортом
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Vue.js
ну и этот кусок

Код: javascript
1.
2.
3.
<div>
                <input type="number" v-model="item.id">  <input type="text" v-model="item.name">
            </div>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
26.02.2020, 19:00
    #39931244
SQL-Talker
SQL-Talker
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Vue.js
Агнец за бортом,

Спасибо так работает.

data - это ошметки из первоначального кода. Я просто максимально сокращал код, перед выкладкой сюда, вырезал лишнее не относящееся к вопросу.

Теперь работающий код вот такой :
Код: 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.
<html>
<head>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
    <div id="app">
        <button @click="editItem(0)">Edit item</button>
        <app-edit :item="itemEdt"></app-edit>
    </div>

    <script>
        // editor component
        let appEdit = {
            props: ['item'],
            template: `
            <div>
                <input type="number" v-model="item.id"> <input type="text" v-model="item.name">
            </div>
            `,
        };

        // Vue instance
        new Vue({
            el: '#app',
            data: {
                items: [{
                    id: 0,
                    name: 'Zero item'
                }],
                itemEdt: {},
            },
            components: {
                'app-edit': appEdit,
            },
            methods: {
                editItem(id) {
                    this.itemEdt = this.items.find(item => item.id === id);
                },
            },
        });
    </script>
</body>
</html>


Судя по "Все плохо", здесь наверно тоже все не так как должно быть по-хорошему.
Подскажете что тут плохо и как должно быть чтобы было хорошо?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Vue.js / 4 сообщений из 4, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
созд. / загр.: 136ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1443528]:
 0ms
get settings:
 9ms
get forum list:
 12ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 40ms
get topic data:
 12ms
get forum data:
 3ms
get page messages:
 42ms
get tp. blocked users:
 2ms
others: 10ms
total:  136ms
x
x
Закрыть


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