0

有什么办法可以使这项工作？

Javascript：

const vm = new Vue({
  el: "#app",
  data: {
    invoice: {
      title: "test"
    }
  }
})

哈巴狗：

#app
  // This works
  h2 {{ invoice.title }}
  input(v-model="invoice.title")

  // This is the thing I want to work
  div(v-model="invoice")
    span {{ title }}

我想要实现的是说“整个容器绑定到数据中的这个对象。它的每个孩子都应该尝试在那个对象而不是根中找到想要的数据。

假设我在 homeAddress 对象中有很多属性，那么我不想写

.container
  span {{ homeAddress.municipality }}    
  span {{ homeAddress.streetNumber }}

但只有

.container(v-model="homeAddress")    
  span {{ municipality }}
  span {{ streetNumber }}

编辑：我知道我可以通过为容器声明一个组件来做到这一点，但感觉有点矫枉过正。

4

1 回答 1

1

简短的回答是，Vue 没有完全直接的功能可以为您提供与 JavaScript 的with.

要获得新范围，您需要一个组件。为了使您在组件中的顶级数据项中传递的所有键，您需要做一个小技巧：让data函数返回 prop。

的魔力inline-template允许您重用您的组件并将您的 HTML 与您决定传入的任何数据相匹配。

const vm = new Vue({
  el: "#app",
  data: {
    invoice: {
      title: "test"
    },
    homeAddress: {
      municipality: 'here',
      streetNumber: 'num'
    },
    someOtherThing: {
      first: 'one',
      second: 'two',
      third: 'three'
    }
  },
  components: {
    newScope: {
      props: ['scope'],
      data() {
        return this.scope;
      }
    }
  }
});
<script src="//unpkg.com/vue"></script>
<div id="app">
  // This works
  <h2>{{invoice.title}}</h2>
  <input v-model="invoice.title">
  <new-scope :scope="homeAddress" inline-template>
    <div>
      <span>{{ municipality }}</span>
      <span>{{ streetNumber }}</span>
    </div>
  </new-scope>
  <new-scope :scope="someOtherThing" inline-template>
    <ul>
      <li>{{ first }}</li>
      <li>{{ second }}</li>
      <li>{{ third }}</li>
    </ul>
  </new-scope>
</div>

于 2017-11-30T19:43:19.060 回答