使用CreateApp创建Vue运行时多选组件-无法绑定模型值

xxls0lw8 于 2023-03-03 发布在 Vue.js

关注(0)|答案(1)|浏览(125)

我尝试在运行时（而不是设计时）创建一个多选组件。下面是我尝试的示例代码。
我的多选选项：

const regions = ref([
   { label: 'Queensland', value: 'QLD' },
   { label: 'New South Wales', value: 'NSW' },
   { label: 'Victoria', value: 'VIC' },
   { label: 'Tasmania', value: 'TAS' },
   { label: 'South Australia', value: 'SA' }]);

我的动态零部件创建如下：

const generateMultiSelectDynamically = (field: string) => {
   var el = document.createElement("div"); //create container for the app
   el.style.display = "inline"

   let selectedRegions = ref();
   var componentApp = createApp(
    MultiSelect, {
    maxSelectedLabels:1,
    options: regions.value,
    optionLabel:(v: any) => `${v.label}`,               
    placeholder: `region`,
    name: `region`,
    multiple:true,
    filter:true,
    // modelValue: selectedRegions
   });

   componentApp.use(PrimeVue);  // Using PrimeVue
   componentApp.mount(el); //mount to DOM
   document.getElementById(field)!.appendChild(el);
   document.getElementById(field)!.appendChild(document.createTextNode(' '))
}

为了查看选项是否正确显示，我临时注解掉了 modelValue。这将正确显示选项，如下所示。

但是如果我绑定它（取消注解绑定代码），然后单击多选，我会收到下面的错误。
类型错误：此. modelValue.some不是函数

所以，不知怎么的绑定不正确。我做错了什么？
已尝试将ref（）、ref（[]）作为 selectedRegions，但没有成功。

vue.js

来源：https://stackoverflow.com/questions/75577062/vue-run-time-multiselect-component-creation-with-createapp-failing-to-bind-mod

1条答案

按热度按时间

eivgtgni1#

这一个成功了，当我们动态创建控件时，双向数据绑定实际上并没有发生（即使在设计时也能正常工作）。

***selectedRegions***需要是数组的引用

ref([])

***modelValue***需要是ref变量的值（这是ref变量的规则）。

modelValue: selectedRegions?.value

并且需要在***onChange***事件中设置选择。

onChange: (event: any) => {
  selectedValues.value?.splice(0, selectedValues.value.length);
  event.value.forEach((element: any) => {
      selectedValues?.value?.push(element);
  });

***splice***用于清除模型，因为每个click事件只带有选中的项目。清除后，我们将值推送到模型中。

因此，整个代码如下所示。

var componentApp = createApp(MultiSelect, {
  maxSelectedLabels: 3,
  options: regions,
  optionLabel: (v: any) => `${v.selectionLabel}`,
  placeholder: selectionName.toLowerCase(),
  name: selectionName,
  multiple: true,
  filter: true,
  modelValue: selectedValues?.value,
  onChange: (event: any) => {
    selectedValues.value?.splice(0, selectedValues.value.length);
    event.value.forEach((element: any) => {
        selectedValues?.value?.push(element);
    });
  },
});

赞(0）回复(0）举报 2023-03-03

我来回答

使用CreateApp创建Vue运行时多选组件-无法绑定模型值

1条答案

相关问题

热门标签

最新问答