Нужна помощь с Vuejs / Veutify (проблема с полем ввода и удаление элементов в списке) - PullRequest
Новая
       4

Нужна помощь с Vuejs / Veutify (проблема с полем ввода и удаление элементов в списке)

0 голосов
/ 24 апреля 2020

Я занят изучением Veu js, и у меня есть две проблемы.

Я создаю простое приложение todo с функцией 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>

Ответы [ 2 ]

1 голос
/ 24 апреля 2020

для стилизации и увеличения ширины ввода используйте комбинацию <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>
1 голос
/ 24 апреля 2020

Ваш код верен, но вам нужно запомнить имена переменных, LOL.

Ваша кнопка удаления вызывает 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);
}

Чтобы все заработало, вам просто нужно исправить метод удаления todo, как показано ниже 

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

WIDTH

Вам необходимо установить ширину для v-карты, поэтому просто обновите свой класс CSS следующим образом. 

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