如何使用 vue.js 在下拉列表中獲取選定值？

Question

我有這樣的父組件vue：

<template>
    <form>
        <div class="row">
            <div class="col-md-4">
                <form-select id="color" name="color" :data="color">Color</form-select>
            </div>
            <div class="col-md-4">
                <form-select id="size" name="size" :data="size">Size</form-select>
            </div>
        </div>
        ...
        <a href="javascript:" class="btn btn-danger" @click="add">
            Add
        </a>
    </form>
</template>

<script>
    import FormSelect from '../form/FormSelect.vue'
    export default {
        data(){
            return {
                quantity: [
                    {id: 1, value: '1'},
                    {id: 2, value: '2'},
                    {id: 3, value: '3'}
                ],
                size: [
                    {id: 1, value: 'S'},
                    {id: 2, value: 'M'},
                    {id: 3, value: 'L'}
                ]
            }
        },
        components: {FormSelect},
        methods: {
            add(event) {
                const color = document.getElementById('color').value,
                      size = document.getElementById('size').value
            }
        }
    }
</script>

我有這樣的子組件vue：

<template>
    <div class="form-group">
        <label :for="id" class="control-label"></label>
        <select :id="id" :name="name" class="form-control" v-model="selected">
            <option v-for="item in data">{{item.value}}</option>
        </select>
    </div>
</template>

<script>
    export default {
        props: ['id', 'name', 'data'],
        data(){
            return {
                selected: ''
            }
        }
    }
</script>

如果我單擊添加按鈕，我會成功選擇值。 但它仍然使用 javascript (document.getElementById)

我想改變它。 所以我想使用數據綁定vue組件。 但我仍然對使用它感到困惑

如何使用數據綁定來做到這一點？

Answer 1

您需要從子組件發出事件以發送數據並使用 on 方法在父組件中獲取該數據：

家長：

<form-select id="color" name="color" :data="color" v-on:triggerChange="changeColor">Color</form-select>

methods: {
 // ...
 changeColor(selected) {
   // do what you want to do with selected
 }
 // ...
}

孩子：

<select :id="id" :name="name" class="form-control" v-model="selected" v-on:change="applyColor">

methods: {
 // ...
 applyColor() {
   this.$emit('triggerChange',this.selected);
 }
 // ...
}

---

根據您的評論，您可以這樣做：

this.$parent.$options.methods.someParentMethod(data)

注意：

謹慎使用 $parent 和 $children - 它們主要用作逃生艙口。 更喜歡使用道具和事件進行父子通信。

Answer 2

當您開發新事物時，一切似乎都是正確的。 以上答案完全正確，感謝及時提供的答案。

發布此答案以更詳細地描述答案。 在 Vue 中開發應用程序時，您必須了解一些事情，例如。

A. 父子組件之間的通信

B. 非親子溝通

A. 父子組件之間的通信

• 讓我們了解父子組件之間的通信。 我已經分解成幾個步驟需要記住的幾件事

i) 將一些方法 X 與父級綁定，以便該方法可以偵聽子級發出的消息

ii) 在子組件中添加 props 屬性以綁定子組件中的數據

iii) this.$emit 與父組件綁定的相同消息 (X)。

父組件

<template>
<form>
    <div class="row">
        <div class="col-md-4">
            <form-select id="color" name="color" (dropdownChanged)= 'colorChanged' :data="color">Color</form-select>
        </div>
        <div class="col-md-4">
            <form-select id="size" name="size" :data="size" (dropdownChanged)= 'sizeChanged'>Size</form-select>
        </div>
    </div>
    ...
    <a href="javascript:" class="btn btn-danger" @click="add">
        Add
    </a>
</form>
</template>

<script>
    import FormSelect from '../form/FormSelect.vue'
    export default {
        data(){
            return {
                quantity: [
                    {id: 1, value: '1'},
                    {id: 2, value: '2'},
                    {id: 3, value: '3'}
                ],
                size: [
                    {id: 1, value: 'S'},
                    {id: 2, value: 'M'},
                    {id: 3, value: 'L'}
                ]
            }
        },
        components: {FormSelect},
        methods: {
            add(event) {
                const color = document.getElementById('color').value,
                      size = document.getElementById('size').value
            },
            colorChanged(color) {
               console.log('Color Changed', color);
            },
            sizeChanged(size) {
               console.log('size Changed', color);
            },
        }
    }
</script>

子組件

<template>
    <div class="form-group">
        <label :for="id" class="control-label"></label>
        <select (change)='dropdownChanged' :id="id" :name="name" class="form-control" v-model="selected">
            <option v-for="item in data">{{item.value}}</option>
        </select>
    </div>
</template>

<script>
    export default {
        props: ['id', 'name', 'data'],
        data(){
            return {
                selected: ''
            }
        },
       methods: {
         dropdownChanged() {
           this.$emit('changesOccured',this.selected)
         }
       }
    }
</script>

B. 非親子溝通

有時兩個組件可能需要相互通信，但它們不是彼此的父/子。 在簡單的場景中，你可以使用一個空的 Vue 實例作為中央事件總線：

var bus = new Vue()
// in component A's method
bus.$emit('id-selected', 1)
// in component B's created hook
bus.$on('id-selected', function (id) {
  // ...
})

參考 - https://v2.vuejs.org/v2/guide/components.html