Добро пожаловать в форум, Guest  >>   Войти | Регистрация | Поиск | Правила | В избранное | Подписаться
Все форумы / HTML, JavaScript, VBScript, CSS Новый топик    Ответить
 Vue - подставить значение выбранного элемента в поле input - есть более простой способ?  [new]
b35.5
Member

Откуда:
Сообщений: 16
По данному [url=
Ссылка на позицию в клипе: http://youtu.be/E0S1ZrQP0-Y?t=337
] видео [/url] пытаюсь осознать и повторить все происходящее. с 40го раза вроде как весь ниже указанный код понятен, но вот вопрос, не ужели "банальная" операция получить значение элемента в input требует десятка операций и кучи переменных/методов и нет нормальных альтернатив?

function getIndex(list, id) {
    for (var i = 0; i < list.length; i++ ) {
        if (list[i].id === id) {
            return i;
        }
    }
    return -1;
}

var messageApi = Vue.resource('/message{/id}');

Vue.component('message-form', {
    props: ['messages', 'messageAttr'],
    data: function() {
        return {
            text: '',
            id: ''
        }
    },
    watch: {
        messageAttr: function(newVal, oldVal) {
            this.text = newVal.text;
            this.id = newVal.id;
        }
    },
    template:
        '<div>' +
            '<input type="text" placeholder="Write something" v-model="text" />' +
            '<input type="button" value="Save" @click="save" />' +
        '</div>',
    methods: {
        save: function() {
            var message = { text: this.text };

            if (this.id) {
                messageApi.update({id: this.id}, message).then(result =>
                    result.json().then(data => {
                        var index = getIndex(this.messages, data.id);
                        this.messages.splice(index, 1, data);
                        this.text = ''
                        this.id = ''
                    })
                )
            } else {
                messageApi.save({}, message).then(result =>
                    result.json().then(data => {
                        this.messages.push(data);
                        this.text = ''
                    })
                )
            }
        }
    }
});

Vue.component('message-row', {
    props: ['message', 'editMethod', 'messages'],
    template: '<div>' +
        '<i>({{ message.id }})</i> {{ message.text }}' +
        '<span style="position: absolute; right: 0">' +
            '<input type="button" value="Edit" @click="edit" />' +
            '<input type="button" value="X" @click="del" />' +
        '</span>' +
        '</div>',
    methods: {
        edit: function() {
            this.editMethod(this.message);
        },
        del: function() {
            messageApi.remove({id: this.message.id}).then(result => {
                if (result.ok) {
                    this.messages.splice(this.messages.indexOf(this.message), 1)
                }
            })
        }
    }
});

Vue.component('messages-list', {
  props: ['messages'],
  data: function() {
    return {
        message: null
    }
  },
  template:
    '<div style="position: relative; width: 300px;">' +
        '<message-form :messages="messages" :messageAttr="message" />' +
        '<message-row v-for="message in messages" :key="message.id" :message="message" ' +
            ':editMethod="editMethod" :messages="messages" />' +
    '</div>',
  created: function() {
    messageApi.get().then(result =>
        result.json().then(data =>
            data.forEach(message => this.messages.push(message))
        )
    )
  },
  methods: {
    editMethod: function(message) {
        this.message = message;
    }
  }
});

var app = new Vue({
  el: '#app',
  template: '<messages-list :messages="messages" />',
  data: {
    messages: []
  }
});
22 авг 18, 15:14    [21650864]     Ответить | Цитировать Сообщить модератору
 Re: Vue - подставить значение выбранного элемента в поле input - есть более простой способ?  [new]
Агнец за бортом
Member

Откуда:
Сообщений: 1146
b35.5,

Читай документацию, а не смотри видосики.

<input v-model="yourTextProperty">


Этого достаточно.

А в твоём коде "проблемы" из-за странных "архитектурных" решений.
23 авг 18, 09:37    [21651595]     Ответить | Цитировать Сообщить модератору
 Re: Vue - подставить значение выбранного элемента в поле input - есть более простой способ?  [new]
hVostt
Member

Откуда:
Сообщений: 15173
Агнец за бортом
Читай документацию


Не, лучше видосики под чипсо :)
23 авг 18, 10:06    [21651636]     Ответить | Цитировать Сообщить модератору
 Re: Vue - подставить значение выбранного элемента в поле input - есть более простой способ?  [new]
Агнец за бортом
Member

Откуда:
Сообщений: 1146
Агнец за бортом
Читай документацию


И если что - на официальном сайте она есть на русском.
23 авг 18, 10:11    [21651647]     Ответить | Цитировать Сообщить модератору
 Re: Vue - подставить значение выбранного элемента в поле input - есть более простой способ?  [new]
Агнец за бортом
Member

Откуда:
Сообщений: 1146
И если реально в этом видео учат такому:

Vue.component('message-form', {
    props: ['messages', 'messageAttr'],


То не смотри его.
23 авг 18, 10:22    [21651667]     Ответить | Цитировать Сообщить модератору
 Re: Vue - подставить значение выбранного элемента в поле input - есть более простой способ?  [new]
b35.5
Member

Откуда:
Сообщений: 16
Агнец за бортом,

а что с этим кодом не так?))
вдумчиво перечитываю оф.сайт (от раздела введение и по порядку).
вроде все как по учебнику...

https://ru.vuejs.org/v2/guide/components.html
Входные параметры — это пользовательские атрибуты, которые вы можете установить на компоненте. Когда значение передаётся в атрибут входного параметра, оно становится свойством экземпляра компонента. Чтобы передать заголовок в компонент нашей записи блога, мы можем включить его в список входных параметров, которые принимает компонент, с помощью опции props:


Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})

https://ru.vuejs.org/v2/guide/components.html
Компонент может принимать столько входных параметров, сколько захотите, и по умолчанию любое значение может быть передано в любой входной параметр. В шаблоне выше вы увидите, что мы можем получить доступ к этому значению в экземпляре компонента, как и к любому свойству data.
24 авг 18, 10:44    [21652813]     Ответить | Цитировать Сообщить модератору
 Re: Vue - подставить значение выбранного элемента в поле input - есть более простой способ?  [new]
Агнец за бортом
Member

Откуда:
Сообщений: 1146
b35.5
а что с этим кодом не так?))


Компонент для редактирования сообщения принимает параметром список сообщений?

НА-ФИ-ГА?
24 авг 18, 12:50    [21653002]     Ответить | Цитировать Сообщить модератору
Все форумы / HTML, JavaScript, VBScript, CSS Ответить