Vue.js 2.x Выбрать внутри компонента, не получая значение

Question

Я пытаюсь вспомнить, как вернуть значение в элементе выбора из компонента.

Несмотря на то, что я держу пари, это довольно легко, я забыл, или я просто делаю это неправильно.

Я звонюкомпонент:

<custom-select :options="options" v-model="selectedMain"></custom-select>

А потом у меня есть сам компонент:

<template>
    <fieldset class="form-group">
        <select v-model="selected" 
                id="something" 
                name="something">
            <option :value="null">Select an option</option>
            <option v-for="option in options" 
                    value="option.id"
                    v-html="option.name"></option>
        </select>
    </fieldset>
</template>
<script>
    module.exports = {
        props: [ 'options' ],
        data: function() {
            return {
                selected: null
            }
        }
    }
</script>

Это определено в моем главном экземпляре Vue, конечно, и это хорошо:

new Vue({
    ...
    data: function() {
        return {
            ...
            selectedMain: null
            ...
        }
    },
    ...
})

Но когда я изменяю значение на 1 (например) из выпадающего меню, я вижу на панели инструментов Vue Debugger, что:

<Root>
    selectedMain: null
    <CustomSelect>
        selected: 1
    </CustomSelect>
</Root>

Редактировать 1: Я думаю, что этопочти то же самое:

Vue.component('custom-select', {
  data () {
    return {
      selected: null
    }
  },
  props: [ 'options' ],
  template: `<fieldset class="form-group">
        <select v-model="selected"
                id="something"
                name="something">
            <option :value="null">Select an option</option>
            <option v-for="option in options"
                    value="option.id"
                    v-html="option.name"></option>
        </select>
    </fieldset>`
});

new Vue({
  el: '#app',
  data: function() {
    return {
      options: [
        { id: 1, name: "First option" },
        { id: 2, name: "Second option" },
        { id: 3, name: "Third option" },
      ],
      selectedMain: null
    }
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

<div id="app">
  <custom-select :options="options" v-model="selectedMain"></custom-select>
  <p>Selected Main: {{ selectedMain }}</p>
</div>

Поэтому я, очевидно, хочу, чтобы selectedMain принимает значение selected .

Как этого добиться?Любые предложения приветствуются.

Answer 1

Вы должны сделать свой собственный компонент способным генерировать изменения и связывать vaue.По умолчанию v-model привязывается к событиям :value и @change и @input, но вы можете настроить его.

В пользовательском компоненте выбора вам нужно что-то вроде:

module.exports = {
    model: {
        prop: 'value',
        event: 'change'
    },
    props: [ 'options', 'value' ],
    data: function() {
        return {
            internal: null
        }
    },
    computed: {
        selected: {
            get() { return this.internal },
            set(val) {
               this.$emit('change', val)
            }
        }
    }
    watch: {
        value(newVal) {
            this.internal = newVal
        }
    }

}

Еслиэто так же просто, как ваш код выше (но я сомневаюсь в этом), реализация может быть даже проще (все сделано в шаблоне):

https://vuejs.org/v2/guide/components-custom-events.html#Customizing-Component-v-model

Vue.component('base-checkbox', {
model: {
    prop: 'checked',
    event: 'change'
},
props: {
    checked: Boolean
},
template: `
    <input
    type="checkbox"
    v-bind:checked="checked"
    v-on:change="$emit('change', $event.target.checked)"
    >
`
})

Какой бы вы использовалив родительском шаблоне как:

<base-checkbox v-model="lovingVue"></base-checkbox>

Answer 2

Vue имеет односторонний поток данных .

Вы можете использовать шину событий или диспетчер состояний, например vuex , чтобы направлять изменение дочернего элемента в глобальное состояние.