vue 组件递归如何实现 输入框的双向绑定?

这是一只小小鸟 发布于 09/02 09:08
阅读 286
收藏 0

Serverless 架构就不要服务器了?>>>

    后端配置了需要输入的项目,有层级结构关系,这个层级结构类似于树形结构,我也可以用 vue 的组件递归来实现页面内容,但是内容生成之后,如何取到那些,不确定的组件中的 input 框里面的值呢?

    props这个是单项传递的。

    $ emit 用这个,监听属性变化,可是输入框的键是后端传过来的,不是固定的, watch 里面的内容就没法写。感觉也没办法监听。

    求大佬提供个解决思路,实在不行 就去 Jqeury 大法了。

    vue 有没有 不用组件递归的方法呀?

加载中
0
saileidigi
saileidigi

https://codesandbox.io/s/great-solomon-x7x3x

// app --- start
<template>
  <div id="app">
    <form @submit.prevent="handleSubmit">
      <InputTree v-model="treeData" />
      <button type="submit">确认</button>
    </form>
  </div>
</template>

<script>
import InputTree from "./components/InputTree.vue";

const getOnlineData = () => 
  new Promise(resolve => {
    resolve({
      data: [
        {
          label: "level-1-1",
          value: "1-1",
          children: [
            {
              label: "level-2-1",
              value: "2-1",
              children: [
                {
                  label: "level-3-1",
                  value: "3-1"
                }
              ]
            }
          ]
        },
        {
          label: "level-1-2",
          value: "1-2"
        }
      ]
    })
  });
  
export default {
  name: "App",
  components: {
    InputTree
  },
  data() {
    return {
      treeData: []
    };
  },
  created() {
    this.getData()
  },
  methods: {
    handleSubmit() {
      console.log(JSON.stringify(this.treeData));
    },
    getData() {
      getOnlineData().then(({ data }) => {
        this.treeData = data;
      });
    }
  }
};
</script>
// app ---- end

// ./components/InputTree.vue  ---- start
<template>
  <div>
    <div class="tree-item" v-for="(item, index) in value" :key="index">
      <label>{{ item.label }}</label>
      <input v-model="item.value">
      <input-tree v-if="item.children" v-model="item.children" />
    </div>
  </div>
</template>

<script>
export default {
  name: "input-tree",
  props: ["value"]
}
</script>

<style scoped>
.tree-item {
  padding-left: 20px;
}
</style>
// ./components/InputTree.vue  ---- end

 

0
返回顶部
顶部