时间戳

首页 > 解决方案 > 如何在vue js中分别为不同的选择字段使用相同的道具

vue.js - 如何在vue js中分别为不同的选择字段使用相同的道具

问题描述

我有一个 vue 组件，其中我在多个选择字段中使用一个 prop(object)

在选择字段中，我正在更改一些单独与 v-model 绑定的数据，但是每当我更改其中的数据时，它也会反映在其他字段中。如何停止这种反应性。

<div class="col-xs-12" v-for="day in parseInt(location.days)" :key="day">
  Day {{day}}-{{preselect(day,defaultt,location.id,place)}}
  <v-select 
    v-model="days[day]"  
    name="addplaceloc"                     
    label="title" @input="addtoplaces(day,location.id)"                      
    :value="defaultt" :options="place"  multiple  />

    <div  v-for="(placeinfo, index) in objj[location.id]['day-'+day]['place']">
      Place: {{placeinfo['title']}}:{{objj[location.id]['day-'+day]['place'][index]['id']}}-->{{index}}->{{day}}

      <label>From:</label>
      <input type="text" v-model="objj[location.id]['day-'+day]['place'][index]['from_time']" >

      <label>To:</label>
      <input type="text" v-model="objj[location.id]['day-'+day]['place'][index]['to_time']">

      <label>Remark:</label>
      <input type="text" v-model="objj[location.id]['day-'+day]['place'][index]['remark']">
      <button @click="run"> yess</button>
    </div>
</div>

在上面的代码中，我有多个城市，多天，在特定日期选择了多个地点。

例如城市 A 有 2 天。

第 1 天我选择了 place1，第 2 天我选择了相同的 place1。

每天我们有 3 个字段：to_time, from_time, remark for each place in that day 。现在，当我将第 1 天更改为_time 时，它​​会反映在第 2 天。在此处输入图像描述

标签： vue.jsvuejs2vue-componentvuexvuetify.js

解决方案

首先，组件不应该更新 props。

参考： https ://vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow

他们应该在初始化期间复制它们，并更新副本。

然后可能在某些操作（例如单击“保存”按钮或模糊）上，组件应将数据作为事件的一部分发出 - 例如“输入”或“更改”事件。

参考： https ://vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components

编辑 - 添加代码和图像后：

您必须正确设置数据结构。此外，我建议将“主数据”与实例数据分开。

城市列表是主数据。地点列表是主数据。你把它们分开。您可以保留一个单独的对象，将详细信息一起映射到 TripSchedule 实体之类的东西中。

例如：

一个时间表或旅行计划=>

{
   city_id1: {
       date1_ddmmyyyy: [place_id1a, placeid1b],
       date2_ddmmyyyy: [place_id1c, placeid1d]
   },
   city_id2: {
       date3_ddmmyyyy: [place_id2a, placeid2b]
   }
}

或者，甚至更好..

{
   date1_ddmmyyyy:[
       {city: city_id1, place: place_id1a},
       {city: city_id1, place: place_id1b}
   ],date2_ddmmyyyy:[
       {city: city_id1, place: place_id1c}
   ],
   date3_ddmmyyyy:[
       {city: city_id2, place: place_id2a},
       {city: city_id2, place: place_id2b}
   ]
}

所以，基本上，不要将旅行计划存储在城市或地方内。

推荐阅读