将 v-model 重置为原始值答案

【问题标题】：Reset v-model to original value将 v-model 重置为原始值
【发布时间】：2021-01-21 08:23:46
【问题描述】：

有没有办法重置 v-model/props 的值？我正在使用惯性js并从laravel控制器接收道具。

Vue

<template>
<div class="p-6">
    <div class="text-indigo-500">
        <input type="text" v-model="post.title" class="appearance-none w-full border-none text-2xl p-0 focus:border-none">
    </div>
    <div class="mt-5">
        <textarea class="appearance-none w-full border-none p-0 focus:border-none text-normal" rows="10" v-model="post.detail"></textarea>
    </div>
    <div class="flex justify-between mt-5">
        <jet-button @click="reset()">
            Reset
        </jet-button>
        <jet-button @click="update()">
            Update
        </jet-button>
    </div>
</div>
</template>

<script>
export default {
    props:{
        post: ''
    },
    methods:{
        reset() {
            this.post = this.post
        } 
    }
}
</script>

【问题讨论】：

重置意味着你应该这样做this.post = {}
@KamleshPaul 不，我的意思是重置为原始值

标签： laravel vue.js inertiajs

【解决方案1】：

你可以像这样维护一个本地的帖子数据

<template>
    <div class="p-6">
        <div class="text-indigo-500">
            <input
                type="text"
                v-model="localPost.title"
                class="appearance-none w-full border-none text-2xl p-0 focus:border-none"
            />
        </div>
        <div class="mt-5">
            <textarea
                class="appearance-none w-full border-none p-0 focus:border-none text-normal"
                rows="10"
                v-model="localPost.detail"
            ></textarea>
        </div>
        <div class="flex justify-between mt-5">
            <jet-button @click="reset()"> Reset </jet-button>
            <jet-button @click="update()"> Update </jet-button>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        post: "",
    },
    data(){
      return{
        localPost:{}
      }
    },
    methods: {
        reset() {
            this.localPost = Object.assign({},this.post);
        },
    },
    mounted(){
      this.localPost = Object.assign({},this.post);
    }
};
</script>

所有操作都在localPost做，需要休息的时候可以做this.localPost = this.post

【讨论】：

这是第一次。如果我第一次按重置它可以工作并且值会恢复到原始值但是当我再次按下它时它不起作用因为 localPost 和 post 现在具有相同的值。
@stalwart1014 欢迎您，如果解决了，请考虑将此标记为答案

【解决方案2】：

让我称你为 ChildComponent 文件

ChildComponent.vue

<template>
<div class="p-6">
    <div class="text-indigo-500">
        <input type="text" v-model="myPost.title" class="appearance-none w-full border-none text-2xl p-0 focus:border-none">
    </div>
    <div class="mt-5">
        <textarea class="appearance-none w-full border-none p-0 focus:border-none text-normal" rows="10" v-model="myPost.detail"></textarea>
    </div>
    <div class="flex justify-between mt-5">
        <jet-button @click="reset()">
            Reset
        </jet-button>
        <jet-button @click="update()">
            Update
        </jet-button>
    </div>
</div>
</template>

<script>
export default {
    data() {
     return {
       myPost: ''
     };
    }
    props:{
        post: {
        type: Object,
     }
    },
    watch: {
     post(newVal) {
       this.myPost = Object.assign({}, newVal);
     }
    },
    mounted() {
      this.myPost = Object.assign({}, this.post);
    },
    methods:{
        reset() {
            this.myPost =  Object.assign({}, this.post)
        } 
    }
}
</script>

【讨论】：

但我没有使用父组件。数据是从 laravel 控制器接收的，并作为 props 通过惯性传递给组件
如果来自 laravel 控制器的值发生变化，那么你需要一个手表来检测变化