Проблема Вуэйса;Как связать новые элементы, добавленные в DOM? - PullRequest
0 голосов
/ 12 декабря 2018

Я хочу добавить новый элемент в DOM после создания нового экземпляра Vue.Я знаю, что могу повторно инициировать экземпляр vue, но, похоже, это не очень хорошая идея, потому что vue придется заново визуализировать все элементы.Так есть ли способ привязать только новый элемент к области данных?

<body>
  <div id="app">
    <span>{{ a }}<span>

    <div id="newElem"></div>
  </div>
</body>

<script>

    $(document).ready(function () {
        var mainApp = new Vue({
            el: "#app",
            data: {
                "a": "aa",
                "b": "bb"    
            }
        });

        $("#newElem").html("<span>{{ b }}</span>")

    });

</script>

Этот код делает {{b}} несвязанным.Я ищу метод для предотвращения этого.

Спасибо

Ответы [ 2 ]

0 голосов
/ 12 декабря 2018

Здесь действительно сложно определить конечную цель, но я сделаю попытку.

В идеале, вы бы не трогали DOM, вы хотели бы обновить данные и позволить Vue обработать DOMдля вас.

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

data: {
  a: 'aa',
  b: undefined,
}

Затем в вашем шаблоне выможет иметь что-то вроде этого:

<span v-if="b">{{ b }}</span>

Таким образом, диапазон не будет отображаться до тех пор, пока b не станет правдивым.

Затем, позже, когда b будет готов, вы бы mainApp.b = 'bb'.

Вот краткая демонстрация: http://jsfiddle.net/crswll/vtu8nzea/1/

Если вы сделаете добавление более полного варианта использования, я, вероятно, смогу помочь в дальнейшем.

Кроме того, этот ответ может помочьтакже.Это похоже на следующий уровень этого мышления: Vuejs: массив v-модели с несколькими входами

0 голосов
/ 12 декабря 2018

Вы пробовали что-то подобное?

<div v-html="newElem"></div>

el: "#app", data: { "a": "aa", "b": "bb"<br> }, created() { this.newElem = "<span>{{ b }}</span>"; }

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...