时间戳

首页 > 解决方案 > 将 v-model 重置为原始值

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

问题描述

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

标签： laravelvue.jsinertiajs

解决方案

您可以像这样维护本地发布数据

<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

推荐阅读