Drop down menu Vue 3选择组件如何将2个属性绑定到2个v模型

假设我有一个数据-

新闻：{id:3，名字：“book”，作者：'author'}

。 然后用

选项选择：{id:1，book:“book1”}，{id:2，book:“book2”}

现在我想用news.id和news.book绑定选项

---

有没有一种方法可以做到这一点或准备好这个组件？

所以最后我做了以下几点：

<select v-model="selected">
  <option v-for="option in options" :value="option.id">
    {{ option.name}}
  </option>
</select>

<select1
    :selected="{ id: book.id, name: book.name }"
    v-model:id="book.id"
    v-model:name="book.name"
    urldata="url/to/get/options"
></select1>

---

这就是你可以做一个对象数组的方法。也许我问了一个不准确的问题。但是我可以将这个selected.name和selected.id绑定到我的模型新闻中，这样它就会是被动的。因此，我不需要在操作结束时处理select来更改我的数据。我不确定你的意思。您可以使用此.options.find（option=>option.id==this.selected.name）访问所选选项名称。您应该只在一个位置拥有“真实”或“真实”数据。

<select1
    :selected="{ id: book.id, name: book.name }"
    v-model:id="book.id"
    v-model:name="book.name"
    urldata="url/to/get/options"
></select1>

<template>
  <div>
    <select v-model="selected" @change="change" class="form-select">
      <option v-for="option in options" :value="option">
        {{ option.name }}
      </option>
    </select>
  </div>
</template>

export default {
  name: "select1",
  emits: ["update:selected", "update:id", "update:name"],
  props: {
    selected: Object,
    urldata: String,
  },
  data: function () {
    return {
      options: [],
    };
  },
  mounted() {
    this.GetListData();
  },
  methods: {
    GetListData() {
      if (this.urldata !== "") {
        axios
          .get(`${this.urldata}`)
          .then((response) => (this.options = response.data.results));
      }
    },
    change(event) {
      console.log(this.selected);

      this.$emit("update:selected", this.selected);
      this.$emit("update:id", this.selected.id);
      this.$emit("update:name", this.selected.name);
    },
  },
};