当我将 v-binding 绑定到 vue 中选择标记中的选定选项时，如何将 v-model 绑定到数据（）答案

【问题标题】：How can I bind v-model to data () when I am v-binding to selected option in select tag in vue当我将 v-binding 绑定到 vue 中选择标记中的选定选项时，如何将 v-model 绑定到数据（）
【发布时间】：2021-03-18 21:49:55
【问题描述】：

我正在引入一个数组（联系人）并在选项标记中对其进行迭代，如果数组联系人 ID 等于 selected_contact，我将显示为选中。这工作正常，但我想将新选择的选项绑定到数据以添加新活动，但它不起作用。我做错了什么？

<select v-model="selected" class="border py-2 px-3 text-grey-800 w-full" name="contact_id">
                   

  <option v-for="contact in contacts" v-bind:selected="contact.id === selected_contact">{{contact.name}}
  </option>

</select>

这是我在 data() 中的内容

data() {
            return {
                name: '',
                selected: '',
                activity_type_id: '',
                comments: ''
            }
        },

然后我尝试用这个 onclick 发送它：

<div class="px-8 py-4 border-gray-200 flex items-center">
          <button @click="addActivity" class="bg-teal-300 hover:bg-teal-800 text-white font-bold py-2 px-4 rounded ml-4 mt-3 mr-15">Add Activity</button>
   
        </div>

使用下面的addActivity函数：


 addActivity(){

                    let activityAdd = {
                           comments: this.comments,
                           contact_id: this.selected,
                           activity_type_id: this.activity_type_id,
                        }
                        console.log(activityAdd);
                        this.$inertia.post('/activity', activityAdd)
                    },

【问题讨论】：

标签： laravel vue.js jetstream inertiajs

【解决方案1】：

按绑定值

<template>
  <div>
    <select v-model="selected" class="border py-2 px-3 text-grey-800 w-full" name="contact_id">
      <option
        v-for="contact in contacts"
        :key="contact.id"
        :value="contact.id"
      >{{contact.name}}</option>
    </select>
  </div>
</template>

使用计算属性

<template>
  <div>
    <select v-model="selected" class="border py-2 px-3 text-grey-800 w-full" name="contact_id">
      <option v-for="contact in contacts" :key="contact.id">{{contact.name}}</option>
    </select>
  </div>
</template>

Selected 是一个对象，所以你可以像它一样初始化它：

 data() {
    return {
      name: "",
      selected: {},
      activity_type_id: "",
      comments: "",
    };
  },

您可以使用计算属性来获取 id：

 computed: {
    selectedID: function () {
      return this.selected.id;
    },
  }

而方法变成：

  methods: {
    addActivity() {
      let activityAdd = {
        comments: this.comments,
        contact_id: this.selectedID,
        activity_type_id: this.activity_type_id,
      };
      this.$inertia.post("/activity", activityAdd);
    },
  },

【讨论】：