Javascript 触发Vue函数以更改某些组件字段时出现问题_Javascript_Html_Vue.js

Javascript 触发Vue函数以更改某些组件字段时出现问题

javascript html vue.js

Javascript 触发Vue函数以更改某些组件字段时出现问题,javascript,html,vue.js,Javascript,Html,Vue.js,好吧，请注意，这是一个非常新的问题，因为我才刚刚开始使用Vue.js 所以，我有一个标签和一个按钮。如果标签不可见，按钮应显示“显示标签”，单击时。。。显示标签。当标签可见时，按钮应显示“隐藏标签”，单击时，隐藏标签这（带有计算属性）显示/隐藏标签，但不会更改按钮标题： <html> <head> <link rel="stylesheet" href="index.css"> <script src="ht

好吧，请注意，这是一个非常新的问题，因为我才刚刚开始使用Vue.js

所以，我有一个标签和一个按钮。如果标签不可见，按钮应显示“显示标签”，单击时。。。显示标签。当标签可见时，按钮应显示“隐藏标签”，单击时，隐藏标签

这（带有计算属性）显示/隐藏标签，但不会更改按钮标题：

<html>
    <head>
        <link rel="stylesheet" href="index.css">
        <script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
    </head>
    <body>

        <div id="app">
            {{ message }}
            This is another thing: <b>{{thing}}</b><br>
            <span :title="title" @click="doSomething">NO TITLE</span>
            <ul v-for="item in items">
                <li>{{item}}</li>
            </ul>
            <button @click="labelVisible=!labelVisible">{{toggleMessage}}</button>
            <label v-if="labelVisible">This is my label</label>
        </div>
    </body>
    <script>
        var app = new Vue({ 
            el: '#app',
            data: {
                message: 'Hello Vue!',
                thing: 'thing',
                title: "This is the title",
                doSomething: ()=>{
                    alert("did something")
                },
                items: ["one", "two", "three"],
                labelVisible: true
            },
            computed: {
                toggleMessage: ()=>{
                    if (this.labelVisible) {
                        return "Hide Label";
                    }
                    else {
                        return "Show Label";
                    }
                }
            }
        });
    </script>
</html>


{{message}}
这是另一件事：{{thing}}

没有头衔

{{item}}

{{toggleMessage}}
这是我的标签
var app=新的Vue（{
el:“#应用程序”，
数据：{
消息：“你好，Vue！”，
事情:"事情",，
标题：“这是标题”，
doSomething:（）=>{
警惕（“做了某事”）
},
项目：[“一”、“二”、“三”]，
labelVisible:正确
},
计算：{
切换消息：（）=>{
如果（此标签可见）{
返回“隐藏标签”；
}
否则{
返回“显示标签”；
}
}
}
});

这一个（仅带有on:click绑定）不起任何作用：

<html>
    <head>
        <link rel="stylesheet" href="index.css">
        <script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
    </head>
    <body>

        <div id="app">
            {{ message }}
            This is another thing: <b>{{thing}}</b><br>
            <span :title="title" @click="doSomething">NO TITLE</span>
            <ul v-for="item in items">
                <li>{{item}}</li>
            </ul>
            <button @click="buttonClicked">{{toggleMessage}}</button>
            <label v-if="labelVisible">This is my label</label>
        </div>
    </body>
    <script>
        var app = new Vue({ 
            el: '#app',
            data: {
                message: 'Hello Vue!',
                thing: 'thing',
                title: "This is the title",
                doSomething: ()=>{
                    alert("did something")
                },
                items: ["one", "two", "three"],
                labelVisible: true,
                toggleMessage: "Hide Label",
                buttonClicked: ()=> {
                    this.labelVisible = !this.labelVisible;
                    if (this.labelVisible) {
                        this.toggleMessage = "Hide Label";
                    }
                    else {
                        this.toggleMessage = "Show Label";
                    }
                }
            }
        });
    </script>
</html>


{{message}}
这是另一件事：{{thing}}

没有头衔

{{item}}

{{toggleMessage}}
这是我的标签
var app=新的Vue（{
el:“#应用程序”，
数据：{
消息：“你好，Vue！”，
事情:"事情",，
标题：“这是标题”，
doSomething:（）=>{
警惕（“做了某事”）
},
项目：[“一”、“二”、“三”]，
labelVisible:没错，
切换消息：“隐藏标签”，
按钮点击：（）=>{
this.labelVisible=！this.labelVisible；
如果（此标签可见）{
this.toggleMessage=“隐藏标签”；
}
否则{
this.toggleMessage=“显示标签”；
}
}
}
});

最好，我想让他们两个都工作。但我还是看不出我做错了什么。Vue开发工具报告没有任何问题

更新：

在第二种情况下，当打印出

labelVisible

和

toggleMessage

的值时，它们的变化很好。只是更改没有反映在组件中。

好的，所以，我将自己的答案发布出来

@AlexBrohshtut发现的是对的。胖箭头功能是一个问题

然而，最重要的是，我没有把我的函数放在

方法中（我也把它们放在数据部分）。Pff
所以，这个有效：
<html>
    <head>
        <link rel="stylesheet" href="index.css">
        <script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
    </head>
    <body>

        <div id="app">
            {{ message }}
            This is another thing: <b>{{thing}}</b><br>
            <span :title="title" @click="doSomething">NO TITLE</span>
            <ul v-for="item in items">
                <li>{{item}}</li>
            </ul>
            <button @click="buttonClicked">{{toggleMessage}}</button>
            <label v-if="labelVisible">This is my label</label>
        </div>
    </body>
    <script>
        var app = new Vue({ 
            el: '#app',
            data: {
                message: 'Hello Vue!',
                thing: 'thing',
                title: "This is the title",
                doSomething: ()=>{
                    alert("did something")
                },
                items: ["one", "two", "three"],
                labelVisible: true,
                toggleMessage: "Hide Label",

            },
            methods: {
                buttonClicked: function() {
                    console.log("button");
                    this.labelVisible = !this.labelVisible;
                    console.log(this.labelVisible);
                    if (this.labelVisible) {
                        this.toggleMessage = "Hide Label";
                    }
                    else {
                        this.toggleMessage = "Show Label";
                    }
                    console.log(this.toggleMessage);
                }
            }
        });
    </script>
</html>


{{message}}
这是另一件事：{{thing}}

没有头衔

{{item}}

{{toggleMessage}}
这是我的标签
var app=新的Vue（{
el:“#应用程序”，
数据：{
消息：“你好，Vue！”，
事情:"事情",，
标题：“这是标题”，
doSomething:（）=>{
警惕（“做了某事”）
},
项目：[“一”、“二”、“三”]，
labelVisible:没错，
切换消息：“隐藏标签”，
},
方法：{
按钮点击：函数（）{
控制台日志（“按钮”）；
this.labelVisible=！this.labelVisible；
console.log（this.labelVisible）；
如果（此标签可见）{
this.toggleMessage=“隐藏标签”；
}
否则{
this.toggleMessage=“显示标签”；
}
console.log（this.toggleMessage）；
}
}
});
这是因为有一个箭头功能，您不能这样做，因为这个
没有Vue。关于这方面的更多信息：@AlexBrohshtut好的，我在第一个示例中做了更改（使用计算属性），您的建议似乎是正确的：消除fat-arrow函数声明确实有效。然而，第二个例子仍然不起作用。（也许，Vue不知道在“手动”数据更改后必须重新渲染组件？），但第二个示例还包含箭头函数：按钮点击：（）=>
@AlexBrohshtut是的，确实如此。问题是我修复了那个部分，但它仍然不工作。它发生了：）祝你好运！