Vue.js jak vykreslit dynamickou složkou?

Question 1

Jsem paní budování laravel projekt s Vue3. Hlavní koncept je, že jsem generovat vstupní atributy z backend a chtěl bych vykreslit tyto v Vue. Teď mám 2 složky. FormComponent který obsahuje základní form tagy, submit button, forma, název, atd... druhý je BaseInputComponent který obsahuje základní <input> tag. V budoucnu tam bude více komponent pro options, checkboxesatd... Co je nejlepší způsob, jak učinit tyto vstupní komponenty se závaznými od FormComponent. Za prvé jsem vytvořit html string s atributy z php takhle: '<base-input-component label="xyz"></base-input-component>' ale nemůžu se tomu, aby to z vue. Další možný způsob je, že jsem používat switch-case v FormComponent a vložte správný vstup, možnost, políčko složka. Chtěl bych zvládnout předložit v FormComponent. Kód je neúplné, přesto, první chci k tomu, aby se tyto součásti a chci ot dosáhnout jejich hodnoty.Co bude nejlepším řešením pro tento?

//This will be the first option json that comes from the backend, but i cant render these out from string.
{
  zip_code: '<base-input-component name="zip_code" label="Zip code"></base-input-component>',
  city: '<base-input-component name="city" label="City"></base-input-component>'
}


//This will be the second option json that comes from the backend
{
  zip_code: {
    name: 'zip_code',
    label: 'Zip code'
    placeholder: 'sadas',
    validation_rules: 'required|string',
    type: 'text'
  },
  city: {
    name: 'city',
    label: 'City'
    placeholder: 'sadas',
    validation_rules: 'required|string',
    type: 'text'
  }
}

BaseInputComponent:

<script>
    export default {
        name: "BaseInputComponent",
        props: {
            label: {
                type: String,
                default: ''
            },
            modelValue: {
                type: [String, Number],
                default: ''
            }
        },
    }
</script>

<template>
    <div class="w-full md:w-1/2 p-3">
        <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
            {{ label }}
        </label>
        <input :value="modelValue"
               @input="$emit('update:modelValue', $event.target.value)"
               class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
    </div>
</template>

Question 2

Pokud mám na vaši otázku jasně, myslím, že to, co potřebujete, je v-for. Viz Vue3 Dokumentace: Seznam Vykreslování

Nemusíte posílat celý HTML text jako varianta 1 z backend, vzhledem k tomu, že je uncessary, a možnost 1 bude zapojen buď Element.appendChild() v javaScript nebo v-html v Vue šablonu (není bezpečné).

Můžete jednoduše použít možnost 2 data, za předpokladu, že v současné době si jen name a label, které by měly být Objekty uvnitř Pole:

data = [
  zip_code: {
    name: 'zip_code',
    label: 'Zip code'
  },
  city: {
    name: 'city',
    label: 'City'
  }
]

Pak použijte v-for v rámci šablony:

<template>
  <div>
    <base-input-component
      v-for="(item, index) in data"
      :key="index"
      :name="item.name"
      :label="item.label"
    />
  </div>
</template>

Rovná se:

<template>
  <div>
    <base-input-component
      name="zip_code"
      label="Zip code"
    />
    <base-input-component
      name="city"
      label="City"
    />
  </div>
</template>

Že by měla vykreslit všechny dynamické base-input-component chcete.

gengar.value · Answer 1 · 2021-11-18T02:30:26

Pokud mám na vaši otázku jasně, myslím, že to, co potřebujete, je v-for. Viz Vue3 Dokumentace: Seznam Vykreslování

Nemusíte posílat celý HTML text jako varianta 1 z backend, vzhledem k tomu, že je uncessary, a možnost 1 bude zapojen buď Element.appendChild() v javaScript nebo v-html v Vue šablonu (není bezpečné).

Můžete jednoduše použít možnost 2 data, za předpokladu, že v současné době si jen name a label, které by měly být Objekty uvnitř Pole:

data = [
  zip_code: {
    name: 'zip_code',
    label: 'Zip code'
  },
  city: {
    name: 'city',
    label: 'City'
  }
]

Pak použijte v-for v rámci šablony:

<template>
  <div>
    <base-input-component
      v-for="(item, index) in data"
      :key="index"
      :name="item.name"
      :label="item.label"
    />
  </div>
</template>

Rovná se:

<template>
  <div>
    <base-input-component
      name="zip_code"
      label="Zip code"
    />
    <base-input-component
      name="city"
      label="City"
    />
  </div>
</template>

Že by měla vykreslit všechny dynamické base-input-component chcete.

Vue.js jak vykreslit dynamickou složkou?

Otázka

Nejlepší odpověď

V jiných jazycích

Tato stránka je v jiných jazycích

Populární v této kategorii

Oblíbené položky v této kategorii