условие vue3 if с петлей v-for

#laravel #vue.js #vue-component

Вопрос:

я получаю все данные из своей базы данных для просмотра с помощью vue3 и laravel.

прямо сейчас это работает нормально, но я хочу применить условие if с v-for.

например: показывать задание только в том случае, если (прогресс=1).

vue: эта часть отлично работает, чтобы получить все из базы данных

 import axios from "axios"; import { defineComponent, reactive } from 'vue'     export default defineComponent({  setup() {    const state=reactive({  todos:[],  todoText:"",  });  function getTodos(){   axios.get('http://127.0.0.1:8000/api/todos')  .then(response=gt;{  state.todos=response.data;  });  }   getTodos();  }  

HTML:

 lt;div v-for="(todo,index) in state.todos" :key="index" class=" border-dashed bg-white rounded-md shadow-md "gt;  lt;div class="justify-between flex "gt;  lt;div class="text-gray-600 p-4 font-medium "gt; {{todo.text}}  lt;span class="text-gray-500 text-sm"gt; Small Details lt;/spangt;   lt;span class="text-gray-500 text-sm"gt; Progress: {{todo.progress}} lt;/spangt;   lt;/divgt; lt;/divgt;  

результат: я не хочу показывать todo, если прогресс=0, в настоящее время он отображается.

введите описание изображения здесь

Ответ №1:

Вы можете использовать тег шаблона, если не хотите, чтобы в ваш код добавлялся элемент DOM:

 lt;div v-for="(todo,index) in state.todos" :key="index" class="border-dashed bg-white rounded-md shadow-md"gt;  lt;template v-if="todo.progress !== 0"gt;  lt;div class="justify-between flex" /gt;  lt;div class="text-gray-600 p-4 font-medium"gt;{{todo.text}}  lt;span class="text-gray-500 text-sm"gt; Small Details lt;/spangt;   lt;span class="text-gray-500 text-sm"gt; Progress: {{todo.progress}} lt;/spangt;   lt;/divgt;  lt;/templategt; lt;/divgt;  

Примечание: вы должны проверить свои закрывающие теги, они не согласованы в вашем текущем вопросе.

Комментарии:

1. это правильный способ сделать это, или я должен сделать это в контроллере laravel, или есть какой-либо другой лучший способ сделать это?

2. Вы также можете добавить a v-if в свои элементы DIV; в любом месте в пределах области вашего v-for цикла. На вопрос, следует ли вам делать это в Ларавеле; это зависит от обстоятельств. Обычно серверная часть должна решать, что должно отображаться на передней панели, но, возможно, вам нужны эти задачи для чего-то другого. Я не могу ответить на этот вопрос без дополнительной информации.

3. Спасибо , я ценю вашу помощь, todo.progress является логическим, если я хочу проверить, равно ли мне, мне придется использовать то же, что и вы, todo.progress==0, чтобы проверить, равно ли оно?

4. Если это логическое значение, просто используйте v-if="todo.progress" без каких-либо логических операций. или !todo.progress если вы хотите отобразить ложные значения.

5. Спасибо, я новичок в vue, где я могу узнать такую подробную информацию о разработчике vue, какие-либо ссылки для изучения?