javascript 对象未更新,但已添加

ih99xse1  于 2023-02-28  发布在  Java
关注(0)|答案(1)|浏览(83)

我试图创建一个复制选定数据的表单,并且只有一个对象可以用<b-form-select>编辑。所有数据都正确传递,但问题是,它不是更新id,而是作为一个新对象添加到数组之外。
这是我提交表单时发生的情况**:**
选定数据:0:{ name:Green, audId: 11}, 1:{ name:Red, audId: 11},
结果:0:{ name:Green, audId: 11}, 1:{ name:Red, audId: 11}, audId:13
但它应该是:0:{ name:Green, audId: 13}, 1:{ name:Red, audId: 13},
我怎样才能让里面的audId更新。如果有任何帮助,我将不胜感激:)
脚本**:**

export default {
  props: {
    audiences: {
      type: Array,
      required: true,
      default: null
    },
    selected: {
      type: Array,
      required: true,
    }
  },
  data() {
    return {
      selectedProp: {
        source: null,
        audId: null,
        name: '',
      },
    };
  },
  created() {
    this.selectedProp = { ...this.selected
    };
  },
  methods: {
    async submitForm($event) {
      console.log(this.selectedProp);

    },
  }
}

模板**:**

<template>
    <form @submit="submitForm($event)">
        <div>
            <label> Network </label>
                <b-form-select v-model="selectedProp.audId"> 
                  <option
                    v-for="audience in audiences"
                    :key="audience.id" 
                    :value="audience.id"
                  >
                    {{ audience.id }}
                  </option>
                </b-form-select>             
        </div>
        <div>
            <table>
                <thead>
                    <tr v-for="(select, index) in selected" :key="index">
                        <th>Name<th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                        {{ select.name }}
                        <input 
                          id="selectedProp.name"
                          v-model="selectedProp.name" 
                          class="form-control" 
                          type="hidden"
                          placeholder
                        >          
                      </td>
                    <tr>
                </tbody>
                <div> 
                  <b-button>Add</b-button>
                </div>
            </table>
        </div>
    </form>
</template>
mlnl4t2r

mlnl4t2r1#

this.selectedProp = { ...this.selected};
// It should be written in the watch function

  watch: {
    selected: {
      handler(val) {
        if (val) {
          this.selectedProp = JSON.parse(JSON.stringify(val)) // or cloneDeep
        }
      },
      immediate: true,
      deep: true,
    },
  },

我没有看到你的$emit函数你能发布它吗?

相关问题