[Vuejs]-Vue: Unable to call component multiple times with different parameters

by

1👍

As @Moritz suggested, you have a typo in your second object: 'numeric' should be 'number'. Change that and you’re good to go.

However, I wanted to point out you could also rely on typeof value 1.

See it here:

const { createApp, defineComponent, computed, ref } = Vue;

const items = [
  {
    label: "first",
    value: "two",
  },
  {
    label: "second",
    value: 2,
  },
  {
    label: "third",
    value: 0,
  },
  {
    label: "fourth",
    value: "3",
  },
  {
    label: "fifth",
    value: "",
  },
  {
    label: "sixth",
    value: null,
  },
  {
    label: "seventh"
  }
];

createApp({
  setup: () => ({ items }),
})
  .component(
    "my-input",
    defineComponent({
      template: `
  <div>
    <label>{{ label }}:
      <input :type="isText ? 'text' : 'number'"
             :placeholder="isText ? 'type a text' : 'type a number'"
             v-model="localValue">
    </label>
  </div>
  `,
      props: ["value", "label"],
      setup: (props) => ({
        isText: computed(() => typeof props.value === "string"),
        localValue: ref(props.value),
      }),
    })
  )
  .mount("#app");
<script src="
https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.prod.js
"></script>
<div id="app">
  <my-input v-for="(item, key) in items" :key="key" v-bind="item" />
</div>

1 – Please notice this solution is brittle. When there is no value, you’ll need to pass missing string values as empty string and treat the other falsey values as numbers.

👤tao

Leave a comment