Javascript vue.js-在事件发生后更改按钮内的文本_Javascript_Vue.js

Javascript vue.js-在事件发生后更改按钮内的文本

javascript vue.js

Javascript vue.js-在事件发生后更改按钮内的文本,javascript,vue.js,Javascript,Vue.js,我使用vue.js是为了学习，它由不同的组件组成，其中一个是经典的待办事项列表。目前，一切都在一个组件中我想在单击按钮以将元素从“隐藏”隐藏到“显示”后更改按钮的文本-我将通过设置文本数据对象，然后在函数中更改它来实现这一点见下文： <div id="app"> <ul> <li v-for="todo in todos"> {{ todo.text }} </li> </ul> <i

我使用vue.js是为了学习，它由不同的组件组成，其中一个是经典的待办事项列表。目前，一切都在一个组件中

我想在单击按钮以将元素从“隐藏”隐藏到“显示”后更改按钮的文本-我将通过设置文本数据对象，然后在函数中更改它来实现这一点

见下文：

<div id="app">
  <ul>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ul>

  <input type="text" id="list-input">
  <input type="submit" id="list-submit" v-on:click="addItem">
  <span id="error" style="color: red; display: none;">Please Enter Text</span>

  <ul>
    <todoitem></todoitem>
    <todoitem></todoitem>
    <todoitem></todoitem>
  </ul>

  <h2 v-if="seen">SEEN</h2>
  <button id="hide-seen" v-on:click="toggleSeen">{{ button.text }}</button>
</div> 

<script type="text/javascript">
// components
Vue.component('todoitem', {
  template: "<li>Test Item</li>"
})

// app code
var app = new Vue({
  el: '#app',
  data: {
    todos: [
      { text: 'Sample Item 1' },
      { text: 'Sample Item 2' },
      { text: 'Sample Item 3' }
    ],
    button: [
      { text: 'Hide'}
    ],
    seen: true
  },
  methods: {
    addItem: function() {
      let item = document.getElementById("list-input").value;
      let error = document.getElementById("error");
      if (item == "") {
        error.style.display = "block";
      } else {
        app.todos.push({ text: item });
        error.style.display = "none";
      }
    },
    toggleSeen: function() {
      app.seen = false
      app.button.push({ text: 'Show' });
    }
  }
})


</script>




{{todo.text}}


请输入文本


看到
{{button.text}
//组成部分
Vue.component（'todoitem'{
模板：“测试项目”
})
//应用程序代码
var app=新的Vue({
el:“#应用程序”，
数据：{
待办事项：[
{text:'示例项1'}，
{text:'示例项目2'}，
{text:'示例项目3'}
],
按钮：[
{text:'隐藏'}
],
看到了吗
},
方法：{
附加项：函数（）{
让item=document.getElementById（“列表输入”）.value；
let error=document.getElementById（“error”）；
如果（项目==“”）{
error.style.display=“block”；
}否则{
app.todos.push（{text:item}）；
error.style.display=“无”；
}
},
toggleSeen:function（）{
app.seen=false
app.button.push（{text:'Show'}）；
}
}
})

出乎意料的是，该按钮在“隐藏”和“显示”状态下均为空。作为vue的新手，这似乎是一种奇怪的方式。在这种情况下更改数据是错误的做法吗？我不知道如何修复这个问题，因为我的控制台中没有错误

在这里，您的代码保存在snipplet中

我通过一个普通的对象而不是数组来更改按钮，并在方法toggleSeen中进行了小的调整

//组件
Vue.component（'todoitem'{
模板：“测试项目”
})
//应用程序代码
var app=新的Vue({
el:“#应用程序”，
数据：{
待办事项：[
{text:'示例项1'}，
{text:'示例项目2'}，
{text:'示例项目3'}
],
按钮：{
文本：“隐藏”
},
看到了吗
},
方法：{
附加项：函数（）{
让item=document.getElementById（“列表输入”）.value；
let error=document.getElementById（“error”）；
如果（项目==“”）{
error.style.display=“block”；
}否则{
app.todos.push（{text:item}）；
error.style.display=“无”；
}
},
toggleSeen:function（）{
app.seen=！app.seen；
app.button.text=app.seen？'Hide'：'Show'；
}
}
});



{{todo.text}}


请输入文本


看到
{{button.text}
您可以通过在vuejs中使用参考来实现这一点：
<body>
    <div id = 'app'>
        <button @click="changeState" ref="btnToggle">Hide</button>
        <div v-show="show">
            <h1>1 to 100</h1>
            <p v-for="i in 100">{{i}}</p>
        </div>
    </div>
    <script>
        const app = new Vue({
            el:'#app',
            data: function(){
                return{
                    show: true
                }
            },
            methods: {
                changeState: function(){
                    this.show = !this.show;
                    this.$refs.btnToggle.innerText = this.show?'Hide':'Show';

                }
            },
        });
    </script>
</body>


隐藏
1至100
{{i}
const app=新的Vue({
el:“#应用程序”，
数据：函数（）{
返回{
秀：真的
}
},
方法：{
changeState:function（）{
this.show=！this.show；
this.$refs.btnToggle.innerText=this.show？'Hide'：'show'；
}
},
});
为什么您的按钮
数据属性是数组？这很好，解决了问题！然而，我在理解这行代码时遇到了困难！app.seen

你能解释一下那里发生了什么吗？所以你只是在每个事件上设置一个相反的条件？我读到app.seen被赋予了相反的条件——这是它的要点吗？app.seen是一个
布尔值，因此等于true或false<代码>是反向条件结果的运算符。若条件结果为true，则返回false；若条件结果为false，则返回true。如果（app.seen==true）{app.seen=false；}或者{app.seen=true；}则情况也是如此