Vue3 變數當變數名稱類似PHP的 $$number

vue3 vue.js

柯柯 2024-07-08 11:44:07 ‧ 884 瀏覽

分享至

我想要做傳入一個array 然後自動生成相關的input組件
這樣的話我該如何定義變數去跟model綁定
用 ‵ ‵ 框起來的是我想將compobj.name的字串當變數的名稱
或是有其他更好的動態生成的方式想法也可以提供嗎
謝謝

a.vue

compObj: [
          { name: "name", type: "text", label: t("name") },
          { name: "language", type: "select", label: t("language"), option: languageOption.value },
        ],

b.vue

<div class="component-div" v-for="comp in compObj" :key="comp.name">
    <q-input v-if="comp.type == 'text'" v-model="`comp.name`" :label="comp.label" />
    <q-select
      v-if="comp.type == 'select'"
      v-model="`comp.name`"
      :options="comp.option"
      :label="comp.label"
    />
</div>

<script setup> 
const props = defineProps({
  compObj: Object,
});
console.log(props.compObj);

const `props.compObj[0].name` = ref();
const `props.compObj[1].name` = ref();
</script>

louischeng1972 iT邦新手 4 級 ‧ 2024-10-14 11:01:39 檢舉

const compObjRef = ref({});

props.compObj.forEach((item) => {
compObjRef.value[item.name] = '';
})

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

㊣浩瀚星空㊣

iT邦大神 1 級 ‧ 2024-07-08 12:43:08

基本上來說。JS要跟PHP一樣直接字串變數對應的做法是不太可能的。
你只能使用一個物件來繼承變數處理

let variables = {}; //準備字串變數用
let a = 'abc';
variables[a] = 'AAA';

console.log(variables,variables[a],variables['abc']);

另外的做法就是用函式物件的方式來處理。定義參數跟取得參數

const variables={};

set('abc','AAA');
let abc = get('abc');

functuin set(key,val){
     variables[key] = val;
}

functiom get(key){
    return variables[key];
}

回應 4
分享
檢舉

看更多先前的回應...收起先前的回應...

㊣浩瀚星空㊣ iT邦大神 1 級 ‧ 2024-07-08 13:04:48 檢舉

提外話：
其實PHP中的「$」
本身就可以將其視為一種物件的存在。
這也是為何它能夠字串變數化處理。
但JS並不存在這樣的東西。

不過像是JQUERY的$及一些VUE的 t()
都有其相同的效果存在。
但就原生的JS來說。並不存在這樣的東西。

柯柯 iT邦新手 2 級 ‧ 2024-07-08 16:42:40 檢舉

下午測試完寫成用變數字串的方式
A.vue

compObj: [
{ name: "language", type: "selectInput", label: t("language"), option: languageOption.value },
{ name: "name", type: "text", label: t("name") },
{ name: "caption", type: "text", label: t("caption") },
{ name: "groups", type: "select", label: t("groups"), option: groupsOption.value },
],

B.vue

<div class="col-5 component-div" v-for="comp in compObj" :key="comp.name">
<q-input v-if="comp.type == 'text'" dense outlined v-model="variables[comp.name]" :label="comp.label" />
<q-select
  v-if="comp.type == 'select'"
  v-model="variables[comp.name]"
  :options="comp.option"
  :label="comp.label"
/>
</div>

const variables = utils.ref({});
Object.keys(props.compObj).forEach((index) => {
  let varKey = props.compObj[index].name;
  variables.value[varKey] = utils.ref("");
});

froce iT邦大師 1 級 ‧ 2024-07-10 10:54:40 檢舉

你的需求就是下面的用v-bind:is的動態組件而已...

柯柯 iT邦新手 2 級 ‧ 2024-07-10 16:55:14 檢舉

@froce 我這個再研究看看
目前剛學幾個月還在摸索中

登入發表回應

淺水員

iT邦大師 6 級 ‧ 2024-07-08 16:08:31

我猜你是要 Dynamic Components

下面是一個範例

App.vue

<script>

import TextComponent from "./components/text-component.vue";
import SelectComponent from "./components/select-component.vue";

const pageComponents = [
    {
        comp: "TextComponent",
        props: {
            label: "文字輸入",
            defaultVal: "測試文字"
        }
    },
    {
        comp: "SelectComponent",
        props: {
            label: "language",
            defaultVal: "中文",
            options: ["中文", "EN"],
        }
    }
];

export default {
    data() {
        return {
            pageComponents
        }
    },
    components: {
        TextComponent,
        SelectComponent,
    }
}
</script>

<template>
    <div v-for="comp in pageComponents">
        <component :is="comp.comp" v-bind="comp.props"></component>
    </div>
</template>

text-component.vue

<script>
let idCounter = 0;
export default {
    props: ['label', 'defaultVal'],
    data() {
        return {
            id: 'text-component-' + (++idCounter),
            val: this.defaultVal
        }
    },
};
</script>

<template>
    <label :for="id">{{ label }}</label><input type="text" v-model="val">
</template>

select-component.vue

<script>
let idCounter = 0;
export default {
    props: ['label', 'defaultVal', 'options'],
    data() {
        return {
            id: 'select-component-' + (++idCounter),
            val: this.defaultVal,
        }
    }
};
</script>

<template>
    <label :for="id">{{ label }}</label>
    <select v-model="val">
        <option v-for="opt in options">{{ opt }}</option>
    </select>
</template>