Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "seat"
父组件传了一个seat给子组件,这个seat是从登录页面的input表单通过localstorage传过来的
在这里我要对这个seat值进行修改,然后提交给后台
我是这样实现的
props: {
seat: {
type: String
}
},
<div class="van-col van-col--12" :span="12">您的座位号</div>
<div class="van-col van-col--12 number" style="text-align: right">
<input id="number" type="number" v-model="seat" ref="input">
</div>
</div>
<cube-button @click="sku_addCart" :primary="true">提交订单</cube-button>
然后测试:
修改座位号数据
截图
意思是:组件内不能修改props的值,同时修改的值也不会同步到组件外层,父组件方不知道子组件内部当前的状态是什么。
因为传入的prop中的值是不允许改变的。这个在vue更新后才会出现的
那我一定要修改这个值,怎么做?
这里我在data里面重新声明一个变量
newseat: this.seat
改一下input的v-model="newseat"
在提交里面
console.log('座位号 ' + this.newseat)
this.$emit('getCalled', this.newseat)
修改
并且没有报错,
这里打印的是要传给后台的数据,不会渲染到所有的页面
问题解决