Question

在使用render / createElement函数在Vue中创建单选按钮时，如何将所选单选按钮的值链接到模型中data对象中的预期变量？

Answer 1

您将必须手动执行。请参见渲染功能页面上v-model上的Vue文档。

渲染函数中没有直接的v-model对应对象-您将必须自己实现逻辑

这是一个非常失败的示例，它将发出单击的单选输入的值。您仍然需要解决确保发出的值是实际选择的无线电的问题，并设置选定的值（如果将其指定为道具）。

const foo = {
  props: ["name"],
  render(h) {
    const $this = this;
    const arr = ["a", "b", "c"];
    return h("div", {}, arr.map(v => h("label", [h("input", {
      domProps: {
        type: "radio",
        name: this.name
      },
      on: {
        click() {
          $this.$emit("change", v);
        }
      }
    }), h("span", v)])));
  }
};

const app = new Vue({
  el: "#app",
  data() {
    return {
      fizz: true
    };
  },
  components: {
    foo
  },
  methods: {
    onChange(e) {
      console.log(e);
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<div id="app">
  <foo name="some" @change="onChange"></foo>
</div>

使用render / createElement将单选按钮链接到Vue中的数据

1 个答案: