时间戳

首页 > 解决方案 > 是否可以在现场克隆 Vuejs 属性？

javascript - 是否可以在现场克隆 Vuejs 属性？

问题描述

我有一个 Vuejs 组件，它可以编辑其值对象的各种属性，并在事情发生变化时发出带有新对象的输入事件。我不想修改值对象本身，因此我将属性复制到数据中，并且我在值的监视中具有基本相同的代码，以便在值更改时更新它们。

如果值可以在设置时被克隆，那将非常简单。有没有办法做到这一点？我知道我可以在“调用”组件中做到这一点，但它不应该这样做。

例子：

<template>
  <div>
    <v-checkbox label="Indoor" v-model="value.indoor" @change="onChange"/>
    <v-checkbox label="Outdoor" v-model="value.outdoor" @change="onChange"/>
  </div>
</template>

<script>
  export default {
    name: 'OptionsInput',

    props: {
      value: Object, // has indoor, outdoor properties
    },

    methods: {
      onChange() { this.$emit('input', this.value) }
    }
  }
</script>

我不想直接修改值。

标签： javascriptvue.js

解决方案

通过计算属性制作副本有效。如果值更改，则将制作一个新副本。比将所有内容复制到数据中并且必须观察更改的价值要容易得多。

<template>
    <div>
        <label><input type="checkbox" v-model="copy.indoor" @change="onChange"/> Indoor</label>
        <label><input type="checkbox" v-model="copy.outdoor" @change="onChange"/> Outdoor</label>
    </div>
</template>

<script>
    export default {
        name: 'OptionsInput',

        props: {
            value: Object, // has indoor, outdoor properties
        },

        computed: {
            copy() { return  {...this.value} }
        },

        methods: {
            onChange() { this.$emit('input', this.copy) }
        }
    }
</script>

推荐阅读