vue.js:465 [Vue warn]: Failed to generate render function:
Question
I got an error like this:
vue.js:465 [Vue warn]: Failed to generate render function:
ReferenceError: Invalid left-hand side in assignment in
with(this){return _c('div',{attrs:{"id":"test"}},[_c('p',[_v(_s(_f("sum 4")(message)))]),_v(" "),_c('p',[_v(_s(_f("cal 10 20 10")(message)))]),_v(" "),_c('input',{directives:[{name:"model",rawName:"v-model",value:(message | change),expression:"message | change"}],attrs:{"type":"text"},domProps:{"value":(message | change)},on:{"input":function($event){if($event.target.composing)return;message | change=$event.target.value}}})])}
This is my HTML file:
(found in <Root>)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="D:\library\vue.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<div id="test">
<p>{{ message | sum 4 }}</p>
<p>{{ message | cal 10 20 10 }}</p>
<input type="text" v-model="message | change">
</div>
<script type="text/javascript">
// -----------------------------------------model->view---------------------------------------
Vue.filter("sum", function(value) {
return value + 4;
});
Vue.filter('cal', function (value, begin, xing) {
return value + begin + xing;
});
// -----------------------------------------view->model---------------------------------------
Vue.filter("change", {
read: function (value) {
return value;
},
write: function (newVal,oldVal) {
console.log("newVal:"+newVal);
console.log("oldVal:"+oldVal);
return newVal;
}
});
var myVue = new Vue({
el: "#test",
data: {
message:12
}
});
</script>
</body>
</html>
I learn vue.js these days,and I found it funny.but this is a big mistake that make me headache......Is there any grammar mistakes?How can I do for this mistake? And what's the meaning of the error? Thank you very much.
1 answers
solution1
0 ACCPTED 2017-08-27 15:02:13
In Vue 2.0 (unlike 1.0) you pass arguments to a filter like this:
<p>{{ message | cal(10, 20, 10) }}</p>
https://v2.vuejs.org/v2/guide/syntax.html#Filters
And the other issue is the filter in the v-model , Vue 2.0 doesn't support them as is, you can implement them but it's a little bit complicated ( https://v2.vuejs.org/v2/guide/migration.html#Two-Way-Filters-replaced ).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.