Question

我收到了这样的错误：

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}}})])}

这是我的HTML文件：

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

这些天我学习vue.js，我发现它很有趣。但这是一个很大的错误让我头痛......有没有语法错误？我怎么能为这个错误做些什么？那错误的含义是什么？非常感谢。

Answer 1

在Vue 2.0（与1.0不同）中，您将参数传递给过滤器，如下所示：

<p>{{ message | cal(10, 20, 10) }}</p>

https://vuejs.org/v2/guide/syntax.html#Filters

另一个问题是v-model中的过滤器，Vue 2.0并不支持它们，你可以实现它们但它有点复杂（https://vuejs.org/v2/guide/migration.html#Two-Way-Filters-replaced）

vue.js：465 [Vue警告]：无法生成渲染功能：

1 个答案: