Необработанный HTML внутри v-модели внутри шаблона vuejs - PullRequest
Новая
       27

Необработанный HTML внутри v-модели внутри шаблона vuejs

0 голосов
/ 23 января 2019

В моем приложении я хотел бы использовать стандартные радиокнопки bootstrap-vue.Вдоль текста я хотел бы поставить маленькую иконку.На этапе создания прототипа, когда я использовал JS и CSS из CDN, я придумал это решение, которое меня устраивало: 

app = new Vue({
  el: "#app",
  data: {
    mode: 'trx',
    mode_options: [
      { text: '<i class="fas fa-cloud-upload-alt"></i> UP', value: 'up' },
      { text: '<i class="fas fa-cloud-download-alt"></i> DOWN', value: 'down' }
    ],
  }
})
<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" >
  <script src="https://unpkg.com/vue"></script>
  <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
</head>
<body>
  <div id="app">
    <b-form-radio-group id="btnradios_mode"
                            buttons
                            v-model="mode"
                            button-variant="outline-secondary"
                            :options="mode_options"
                            name="radiosBtnDefault" />
  </div>
</body>
</html>

К сожалению, когда я начал переходить к рабочей версии и использовал VUE-CLI с шаблонами, тот же код не работает: значки не отображаютсявверх.Пытаясь понять проблему, я начал подозревать некоторую проблему с тем, как обрабатывается RAW HTML внутри v-модели (в целом v- *), но я не могу полностью понять / отладить проблему.

Кто-нибудь предложил бы обходной путь?Для меня также подойдет другой способ встраивания иконок в радиогруппу.

1 Ответ

0 голосов
/ 23 января 2019 
<template>
    <div>
        <b-form-radio-group id="btnradios_mode"
                            buttons
                            v-model="mode"
                            button-variant="outline-secondary"
                            name="radiosBtnDefault" >
            <b-form-radio v-for="opt in mode_options" :key="opt.value" :value="opt.value">
                <i :class="opt.icon"/>
                {{ opt.text }}
            </b-form-radio>
        </b-form-radio-group>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                mode: 'trx',
                mode_options: [
                    { icon: 'fas fa-cloud-upload-alt', text: 'UP', value: 'up' },
                    { icon: 'fas fa-cloud-download-alt', text: 'DOWN', value: 'down' }
                ],
            }
        }
    }
</script>
...