Блог

Главная - Вопросы по программированию - как использовать v-for с v-html

как использовать v-for с v-html

#javascript #vue.js

Вопрос:

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

пример того, что я хочу сделать, — это перечислить «метод» на этом сайте:

https://www.bbc.co.uk/food/recipes/easy_chocolate_cake_31070

мой код:

 <script>
import 'highlightjs/styles/dracula.css'
import hljs from 'highlightjs/highlight.pack.js'
import { baseApiUrl } from '@/global'
import axios from 'axios'
import PageTitle from '../template/PageTitle'

export default {
    name: 'RecipeById',
    components: { PageTitle },
    data: function() {
        return {
            recipe: {},
            recipes: []
        }
    },
    mounted() {
        const url = `${baseApiUrl}/recipes/${this.$route.params.id}`
        axios.get(url).then(res => this.recipe = res.data)
    },
    updated() {
        document.querySelectorAll('.recipe-preparation pre.ql-syntax').forEach(e => {
            hljs.highlightBlock(e)
        })
    }
}
</script> 
 <template>
    <div class="recipe-by-id">
        <PageTitle icon="fa fa-file-o" :main="recipe.name" />
        <div class="info-recipe">
            <img v-if="recipe.imageUrl"
                :src="recipe.imageUrl"
                height="400" width="100%" alt="Recipe">
            <img v-else
                src="@/assets/article.png"
                height="400" width="100%" alt="Recipe">
        </div>
        <div class="info-ingredients">
            <h2>Ingredients</h2>
            <div class="recipe-ingredients" v-html="recipe.Ingredients"></div>
        </div>
        <div class="info-preparation">
            <h2>Preparation mode</h2>
            <ol>
                <li v-for="(recipe, i) in recipes" :key="i" class="recipe-preparation"
                 v-html="recipe.preparation"></li>
            </ol>
        </div>
    </div>
</template>

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

1. Будет ли работать добавление внутреннего тега в li? (т. е. <li v-for=...><span v-html=...></span></li> ?

2. нет, я уже пытался сделать li с помощью span, но это не сработало, я использую редактор vue для сохранения текста в базе данных и пытаюсь просмотреть каждую строку и поместить их в перечисленный список

3. Вы v-for выполняете итерацию по полю recipes данных, но ни в одной точке вашего кода в это поле не вводится какое-либо значение. Должны ли вы на самом деле искать где-то в recipe поле нужный вам массив? Это может помочь увидеть пример данных, возвращаемых вашим API.

4. не могли бы вы показать нам данные вашего ответа? С помощью этого мы можем работать над решением.

5. спасибо за внимание и извините за задержку с ответом, но я смог решить проблему без необходимости использовать v-для

Метки: