#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, какие-либо ссылки для изучения?