VueJS - Обрезанные слоты и манипулирование данными - PullRequest
Новая
       0

VueJS - Обрезанные слоты и манипулирование данными

1 голос
/ 24 января 2020

У меня есть vuejs компонент edit-form с именованным слотом body внутри него и данными, называемыми model. 


    
        {{ model }}
Имя:
экспорт по умолчанию {data: function () {return {model: {name: "x", title: "y"}}}}

Я использую этот компонент в родительском компоненте следующим образом: 

  <edit-form>
    <template v-slot:body="model">
      Title: <input v-model="model.title">
    </template>
  </edit-form>

Когда я сейчас ввожу что-то в поле ввода name, тег {{ model }} обновляется. Изменение поля ввода title не влияет на <pre>.

См. https://codepen.io/bernhardh/pen/KKwEVZo

Как заставить работать поле ввода title?

1 Ответ

0 голосов
/ 24 января 2020

Вы должны внести в этот код некоторые изменения! Например,

Html код: 

<html>
<head></head>
<body>

<div id="container">
  <edit-form v-model="model">
    <template slot="body">
      Title: <input v-model="model.title">
    </template>
  </edit-form>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</body>
</html>

Vuejs код: 

<code>Vue.component('edit-form', {
      template : `<div>
              <pre>{{ value }}
Имя:
`, реквизиты: {value: {reqired: false, тип: Object}}, data: function () {return {}; }}); новый Vue ({el: '#container', данные: {value: '', модель: {name: "x", title: "y"}},});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...