laravel - 将 v-model 重置为原始值

Question

有没有办法可以重置 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>

Answer 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

Answer 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>