Я хочу показать только один вход нажал (на vue. js) - PullRequest
Новая
       22

Я хочу показать только один вход нажал (на vue. js)

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

Я хотел бы показать вход по нажатию, но, находясь в течение l oop Я хотел бы показать только нажатой 

<div v-for="(todo, n) in todos">
    <i class="fas fa-minus ml-2"></i>
    <li class="mt-2 todo">
        {{ todo }}
    </li>
    <li class="button-container">
        <button class="ml-1 btn btn-primary rounded-circle btn-sm" v-if="isHidden" v-on:click="isHidden = false"><i
                class="THIS-CLICK"></i></button>
        <input class="ml-5 border border-primary rounded" v-if="!isHidden" v-model="todo">
        <button class="ml-1 btn btn-success rounded-circle btn-sm" v-if="!isHidden" v-on:click="isHidden = true"
            @click="modifyTodo(n, todo)"><i class="far fa-save"></i></button>
    </li>
</div>

Я хотел бы, чтобы при нажатии на ЭТО ЩЕЛКНИТЕ, виден только один вход (нажатие кнопки), но в течение 1 oop Я не знаю, можно ли это сделать

Ответы [ 2 ]

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

Я бы предложил немного изменить структуру вашего приложения. Вы можете очистить свой код, используя v-if внутри кнопки вместо двух разных кнопок.

Также хорошей практикой является как можно большее удаление javascript из разметки.

Ниже приведен пример, где это делается.

Относительно вашего вопроса , вам нужно будет добавить ключ к каждому предмету todo. 

new Vue({
  el: "#app",
  data() {
    return {
      todos: [{
          name: 'wash hands',
          isHidden: true
        },
        {
          name: 'Stay home',
          isHidden: true
        }
      ],
    };
  },

  methods: {
    toggleTodo(n, todo) {
      const hidden = todo.isHidden;
      
      if (hidden) {
        this.modifyTodo(n, todo);
        todo.isHidden = false;
      } else {
        todo.isHidden = true;
      }
    },
    
    modifyTodo(n, todo) {
      //Some logic...
    }
  },
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <div v-for="(todo, n) in todos">
    <i class="fas fa-minus ml-2"></i>
    
    <li class="mt-2 todo">
      {{ todo.name }}
    </li>
    
    <li class="button-container">
      <input class="ml-5 border border-primary rounded" v-if="!todo.isHidden" v-model="todo.name">
      
      <button @click="toggleTodo(n, todo)">
        <i v-if="todo.isHidden" class="THIS-CLICK">click-this</i>
        <i v-else class="far fa-save">save</i>
      </button>     
    </li>
  </div>

</div>

Если вы не можете этого сделать, вы можете go добавить новый ключ к данным, например: hiddenTodos, который будет массивом идентификаторов / a уникальный идентификатор задачи, которую вы выбрали, чтобы скрыть.

в шаблоне, это будет примерно так: 

<button @click="hiddenTodos.push(todo)">
...
<div v-if="hiddenTodos.includes(todo)"
0 голосов
/ 04 апреля 2020

Одним из решений было бы добавление атрибута isHidden:false к каждому элементу в todos, поэтому вы можете сделать v-if="todo.isHidden" и изменить onclick на modifyTodo(n,param), чтобы выполнить это: this.todos[n].isHidden=param, где param будет логическое значение в зависимости от случая

...