在VUE中，使用SELECT在一个对象数组中选择对象

发布于 2025-02-05 02:43:25 字数 746 浏览 4 评论 0原文

我有一个带有选项的元素，该元素通过一系列对象（ services ）循环。

<select placeholder="Vælg ydelse">
    <option v-for="service in services" :key="service.id">
        {{service.name}}
    </option>
</select>

在我的数据对象中，我

chosenService: {
    id: 42,
    name: "some service",
    group: {
        id: 2,
        name: "some group within the service",
    },
    additions: [],
    classSignupMoreActive: false,
},

想在选择选择后要检索。

最后，我正在从父母那里发送服务数组，因为所有这些都在组件中发生。我不确定这是否是最正确的方法。

像这样：

<Modal
  :show="showModal"
  @close="showModal = false"
  title="Modal Title"
  :services="this.services"
>
</Modal>

原文

I have a select element with options, which loops through an array of objects (services).

<select placeholder="Vælg ydelse">
    <option v-for="service in services" :key="service.id">
        {{service.name}}
    </option>
</select>

In my data object, I have

chosenService: {
    id: 42,
    name: "some service",
    group: {
        id: 2,
        name: "some group within the service",
    },
    additions: [],
    classSignupMoreActive: false,
},

Which I'd like to be retrieved once the select is changed.

Finally, I'm sending the services array from the parent, as all of this is happening in a component. I'm not sure if this is the most correct way to do it.

Like this:

<Modal
  :show="showModal"
  @close="showModal = false"
  title="Modal Title"
  :services="this.services"
>
</Modal>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

长伴 2025-02-12 02:43:25

您可以使用V-Model并将对象传递给：value选项的属性：

new Vue({
  el: "#demo",
  data() {
    return {
      services: [{id: 42, name: "some service", group: {id: 2, name: "some group within the service",}, additions: [], classSignupMoreActive: false,}, {id: 43, name: "some other service", group: {id: 2, name: "some group within the service",}, additions: [], classSignupMoreActive: false,}],
      chosenService: {},
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <select v-model="chosenService" placeholder="Vælg ydelse">
    <option v-for="service in services" :key="service.id" :value="service">
        {{service.name}}
    </option>
  </select>
  chosenService = {{ chosenService }}
</div>

You can use v-model and pass object to :value property of option:

new Vue({
  el: "#demo",
  data() {
    return {
      services: [{id: 42, name: "some service", group: {id: 2, name: "some group within the service",}, additions: [], classSignupMoreActive: false,}, {id: 43, name: "some other service", group: {id: 2, name: "some group within the service",}, additions: [], classSignupMoreActive: false,}],
      chosenService: {},
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <select v-model="chosenService" placeholder="Vælg ydelse">
    <option v-for="service in services" :key="service.id" :value="service">
        {{service.name}}
    </option>
  </select>
  chosenService = {{ chosenService }}
</div>

回复收藏 0 原文

~没有更多了~