在容器上声明父模型

时间:2017-11-30 18:46:19

标签: design-patterns vue.js v-model

有没有办法使这项工作?

使用Javascript:

temp.ols.reg <- lapply(temp.expr2,function(x) lm(as.formula(x),data=mydata))

帕格:

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

我想要达到的目的是说&#34;这个整个容器绑定到数据中的这个对象。它的每个孩子都应该尝试在该对象中找到所需的数据而不是在根目录中。

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

#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 }}

但仅

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

编辑:我知道我可以通过为容器声明一个组件来做到这一点,但感觉有点过分了。

1 个答案:

答案 0 :(得分:1)

简短的回答是,Vue没有完全直接的功能,可以让您重置范围 - 等同于JavaScript with

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

inline-template的神奇之处在于允许您重复使用您的组件,并将您的HTML与您决定传入的任何数据相匹配。

&#13;
&#13;
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;
      }
    }
  }
});
&#13;
<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>
&#13;
&#13;
&#13;