小编A.C*_*A.C的帖子

我有一些表单数据，我通过道具与子组件共享。现在我想克隆 prop 对象并使其无反应。就我而言，我希望用户能够在不实际更改克隆值的情况下修改 props 值。克隆值应该只用于向用户显示编辑时表单的内容。下面的代码显示了这一点：

    <template>
        <div>
            <div v-if="computedFormData">
                original prop title: {{orgData.title}}

                new title:
                <input type="text" v-model="formData.title"/> 
                //changing data here will also change orgData.title
            </div>

        </div>
    </template>

    <script>
        export default {
            props: ['formData'],
            data() {
                return {
                    orgData: [],
                }
            },
            computed: {
                computedFormData: function () {
                    this.orgData = this.formData;
                    return this.orgData;
                },
            },
            methods: {
            },
        }
    </script>

我试过Object.freeze(testData);但它不起作用，testData 和 orgData 都是反应性的。另请注意，使用mounted或created属性不会呈现 orgData，因此我被迫使用该computed属性。

如何根据按下的按钮动态激活选项卡。我正在使用<b-tabs>from bootstrap-vue. 从我下面的示例代码中，step变量根据按下的按钮进行更改，但无论如何选项卡始终处于活动状态。

    <template>
        <div>
            <b-tabs>
                <b-tab title="Step 1" :active="step === 1">
                   <br>step 1
                </b-tab>
                <b-tab title="Step 2" :active="step === 2">
                    <br>step 2
                </b-tab>
                <b-tab title="Step 3" :active="step === 3">
                    <br>step 3
                </b-tab>
            </b-tabs>

            <button v-on:click="step = 1">Step 1</button>
            <button v-on:click="step = 2">Step 2</button>
            <button v-on:click="step = 3">Step 3</button>

        </div>
    </template>

    <script>
        export default {
            data() {
                return {
                    step: 0,
                }
            },
            mounted() {
            },
            methods: {
            },
        }
    </script>