需要 Vue Js/Vuetify 的帮助（输入字段和删除列表中的项目的问题）答案

【问题标题】：Need Assistance with Vuejs/Veutify (proboblem with input field and deleting items in list)需要 Vue Js/Vuetify 的帮助（输入字段和删除列表中的项目的问题）
【发布时间】：2020-04-23 23:44:59
【问题描述】：

我忙于学习 Veujs，我有两个问题。

我正在创建一个具有 CRUD 功能的简单待办事项应用程序，并且我正在通过输入字段传递数据，如果我在 CSS 中为其设置任何规则，它不想设置为全宽

其次，我有一个删除按钮，当您将复选框选中为完成时会显示，但我不知道我做错了什么我按照谷歌搜索的 vuejs 文档，但该按钮不想从我的列表

任何帮助将不胜感激。

<template>
  <v-card class="wrapper mx-auto">
    <v-list-item>
      <v-list-item-content>
        <v-list-item-title c class="title">Your Todo's</v-list-item-title>
      </v-list-item-content>
      <v-spacer></v-spacer>
      <v-text-field
        prepend-inner-icon="mdi-magnify"
        label="Search"
        single-line
        clearable
        clear-icon="mdi-close-circle-outline"
      ></v-text-field>
    </v-list-item>
    <v-divider></v-divider>

    <v-container id="todoApp">
      <v-form name="todo-form" method="post" action v-on:submit.prevent="addTask">
        <v-text-field
          v-model="addTodoInput"
          v-bind:class="{error: hasError}"
          label="What are you working on?"
          solo
          @keydown.enter="create"
        >
          <v-fade-transition v-slot:append></v-fade-transition>
        </v-text-field>
      </v-form>

      <v-divider class="mb-4"></v-divider>
      <v-card class="todo-lists" v-if="lists.length">
        <v-list-item v-for="list in lists" :key="list.id">
          <v-checkbox v-model="list.isComplete" :color="list.isComplete ? 'success' : 'primary'"></v-checkbox>
          <v-list-item-action>
            <input class="input-width" type="text" v-model="list.text" />
          </v-list-item-action>

          <v-spacer></v-spacer>

          <v-scroll-x-transition>
            <div v-if="list.isComplete">
              <v-btn class="ma-2" v-on:click="removeTask(id)" tile large color="error" icon>
                <v-icon>mdi-trash-can-outline</v-icon>
              </v-btn>
            </div>
          </v-scroll-x-transition>
        </v-list-item>
      </v-card>
    </v-container>
  </v-card>
</template>

<script>
export default {
  data: () => ({
    addTodoInput: null,
    lists: [
      { id: 1, isComplete: true, text: "go home" },
      { id: 2, isComplete: true, text: "go home" }
    ],

    hasError: false // <-- to handle errors
  }),

  methods: {
    addTask: function() {
      if (!this.addTodoInput) {
        // <--- If no value then we are setting error to `true`
        this.hasError = true;
        return;
      }

      this.hasError = false; // <--- If textbox is filled then setting error to `false`

      this.lists.push({
        id: this.lists.length + 1,
        text: this.addTodoInput,
        isComplete: false
      });
      this.addTodoInput = ""; //clear the input after successful submission
    },
    updateTask: function(e, list) {
      e.preventDefault();
      list.title = e.target.innerText;
      e.target.blur();
    },
    create() {
      console.log("create");
    },
    removeTodo: function(lists) {
      this.todos.splice(list, 1);
    }
  }
};
</script>


<style scoped>
.wrapper {
  height: 100%;
}
input.input-width {
  width: 100%;
}
</style>

【问题讨论】：

标签： css vue.js vuetify.js

【解决方案1】：

你的代码是对的，但是你需要记住你的变量名，哈哈。

您的删除按钮正在调用removeTask，但在您的方法中它被重命名为removeTodo。在相同的方法中，您尝试从数据todos 进行拼接。但在您的数据中，它重命名为lists。此外，您将lists 作为参数传递，但随后将其用作list

<v-btn class="ma-2" v-on:click="removeTask(id)" tile large color="error" icon>
  <v-icon>mdi-trash-can-outline</v-icon>
</v-btn>

removeTodo: function(lists) {
  this.todos.splice(list, 1);
}

要让一切正常工作，您只需要更正删除待办事项的方法，如下所示

removeTask: function(list) {
 this.lists.splice(list, 1);
}

宽度

您需要为 v-card 设置宽度，因此只需按如下方式更新您的 CSS 类。

.wrapper {
  height: 100%;
  width: 100%;
}

【讨论】：

【解决方案2】：

对于样式和使您的输入全宽使用 <v-row></v-row> 和 <v-col></v-col> 组合，这是 Vuetify 结构的重要组成部分。例如：

<v-row align="center" justify="center">
  <v-col cols="12" sm="12">
    <your-input-goes-here/>
  </v-col>
<v-row>

在显示删除部分时使用标签而不是 div，使用 div 会影响您的样式。

<template v-if="list.isComplete"> ... </template>

您调用了不存在的removeTask(id) 函数！要么改成removeTodo(list) 要么写新函数！

      <v-scroll-x-transition>
        <template v-if="list.isComplete">
          <v-btn class="ma-2" v-on:click="removeTodo(list)" tile large color="error" icon>
            <v-icon>mdi-trash-can-outline</v-icon>
          </v-btn>
        </template >
      </v-scroll-x-transition>

【讨论】：