我开始玩vuejs(2.0).我构建了一个包含一个组件的简单页面.该页面有一个带有数据的Vue实例.在那个页面上,我注册并将组件添加到html.该组件有一个input[type=text].我希望该值反映在父(主Vue实例)上.
如何正确更新组件的父数据？从父级传递绑定的prop并不好,并向控制台发出一些警告.他们的文档中有一些东西,但它不起作用.
升级到Vue 2.0时我遇到了很常见的问题
我收到警告:
避免直接改变道具,因为只要父组件重新渲染,该值就会被覆盖.而是根据prop的值使用数据或计算属性.Prop变异:"username"(在组件中找到)
我多次阅读文档,但我仍然无法理解如何修复它.
username并password在主Vue应用程序中声明.
这是我的代码:
var GuestMenu = Vue.extend({
props : ['username', 'password'],
template: `
<div id="auth">
<form class="form-inline pull-right">
<div class="form-group">
<label class="sr-only" for="UserName">User name</label>
<input type="username" v-model="username" class="form-control" id="UserName" placeholder="username">
</div>
<div class="form-group">
<label class="sr-only" for="Password">Password</label>
<input type="password" v-model="password" class="form-control" id="Password" placeholder="Password">
</div>
</form>
</div>`,
});
App = new Vue ({
el: '#app',
data:
{
topMenuView: "guestmenu",
contentView: "guestcontent",
username: "",
password: "",
}
})
我试过v-bind但它似乎没有用,我无法理解为什么.它应该将值绑定到父级(主Vue应用程序)
我的看法是这样的：
<div class="col-md-8">
...
<star :value="{{ $data['rating'] }}"></star>
...
</div>
我的明星部分是这样的：
<template>
<span class="rating" :class='{"disable-all-rating": !!value}'>
<template v-for="item in items">
<label class="radio-inline input-star" :class="{'is-selected': ((starValue>= item.value) && starValue!= null)}">
<input type="radio" class="input-rating" v-model="starValue" @click="rate(item.value)">
</label>
</template>
</span>
</template>
<script>
export default{
props: {
'value': null
},
computed: {
starValue () {
return this.temp_value
}
},
data(){
return{
items: [
{value: 5},
{value: 4},
{value: 3},
{value: 2},
{value: 1}
],
temp_value: null,
}
},
methods:{
rate: function (star) {
this.$http.post(window.BaseUrl …我是vuejs的新手，正在尝试将活动数据同步到父级，但出现错误
vue.js：523 [Vue警告]：避免直接更改道具，因为每当父组件重新渲染时，该值就会被覆盖。而是使用基于属性值的数据或计算属性。道具被突变：“有效”（位于组件中）
我的Vuejs代码如下
<div id="app">
<pre>
{{$data}}
</pre>
<div v-for="plan in plans">
<plan :plan="plan" :active.sync="active"></plan>
</div>
</div>
<template id="mytemplate">
<div>
{{$data}}
<span>{{plan.name}}</span>
<span>{{plan.price}}</span>
<button @click="setActivePlan">upgrade</button>
</div>
</template>
<script src="vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
active:this.active,
plans: [
{name: 'Diamond', price: '1000'},
{name: 'Gold', price: '500'},
{name: 'Silver', price: '250'},
{name: 'Free', price: '0'}
]
},
components: {
plan: {
template: "#mytemplate",
props: ['plan', 'active'],
methods: {
setActivePlan: function () {
this.active = this.plan
}
} …