Question

我正在开发一个Vue应用程序 - 非常简单的说todo列表，如下例所示。但是我想在提交时隐藏我的输入字段（因此只显示已经输出的输出），所以我可以进行一个很好的转换，因为每个输入字段只应添加一个项目。

希望有人可以帮助我找到一个好的解决方案！

＆＃13;

new Vue({
  el: "#madplan",
  data: {
    newTask_mandag: "",
    taskList_mandag: [],
  },

  methods: {
    addTask_mandag: function() {
      var task = this.newTask_mandag.trim();
      if (task) {
        this.taskList_mandag.push({
          text: task
        });
        this.newTask_mandag = "";
      }
    },

    removeSubTask_mandag: function(task) {
      var index = this.taskList_mandag.indexOf(task);
      this.taskList_mandag.splice(index, 1);
    },
  }
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="madplan">
  <section>
    <section class="prefetch" class="panel">
      <input class="input typeahead" type="text" placeholder="Tilføj ret til madplanen" v-model="newTask_mandag " v-on:keyup.enter="addTask_mandag">
    </section>

    <details v-for="task in taskList_mandag" v-bind:key="task.text" class="sub-list-item">
      <summary>{{ task.text }} <button v-on:click="removeSubTask_mandag(task)">X</button></summary>

    </details>
  </section>
</div>

＆＃13;

Answer 1

input标记上的

添加指令v-if='showInput'以有条件地显示该元素。然后添加计算属性以确定条件，如此

   computed: {
        showInput: function() {
        return !this.taskList_mandag.length
      }
    },

隐藏提交输入（VUE）

1 个答案: