Question

我有一个带有键值对的对象，我用它来生成文本框，使用键作为标签，使用 v-for 循环将值作为文本框值。我想在添加按钮点击时添加一个新的文本框。这是代码。

library(tidyverse)

df <- tibble(names = mtcars %>% 
               rownames(),
             mtcars)

p1 <- df %>% 
  filter(names == "Duster 360" | names == "Valiant") %>% 
  ggplot(aes(x = as.factor(cyl), y = mpg, color = names)) +
  geom_point() +
  geom_hline(aes(yintercept = 20, linetype = "a"))

library(cowplot)

guide_color <- get_legend(p1 + guides(linetype = "none"))

plot_grid(p1 + 
            guides(color = "none") + 
            theme(legend.position = "bottom"), 
          guide_color, 
          ncol = 2, rel_widths = c(.85, .15))

我的点击事件是：

<CRow>
  <CCol sm="6">
    <CDropdown toggler-text="My Test">
      <CDropdownHeader>--Select--</CDropdownHeader>
      <CDropdownItem
        v-for="(value, key) in keys_with_empty_value"
        :key="key"
        >{{ key }}</CDropdownItem
      >
    </CDropdown>
  </CCol>
  <CCol sm="6">
    <CButton :color="'info'" @click="addtextbox"> Add </CButton>
  </CCol>
</CRow>
<CRow>
  <CCol
    sm="6"
    v-for="(value, key, index) in keys_with_not_empty_value"
    :key="key"
  >
    <CInput :label="key" type="text" v-model="keys_with_not_empty_value[key]" />
  </CCol>
</CRow>

我在我的对象中添加了新键，我在 v-for 中使用了它并生成了其他文本框。根据我对 vue-js 的理解，如果我更改 vue 脚本部分中的任何数据，它应该反映在 HTML 部分。但是我的 v-for 循环没有更新，我无法看到新添加的键的新文本框。

如有任何建议，我们将不胜感激。

Answer 1

您的代码似乎在此 demo 1 中有效，但它只添加了一个新文本框，因为 addtextbox 仅插入特定键（而不是新的唯一键）。

但是，组件名称表明您正在使用 Core UI，目前 (v3.1.4) 仅适用于 Vue 2。在 Vue 2 中，新添加的对象键是 not automatically detected，因此您将需要使用 vm.$set 插入新键：

export default {
  methods:{
    addtextbox() {
      //this.keys_with_not_empty_value.system_dummy_data = "";
      this.$set(keys_with_not_empty_value, "system_dummy_data", "");
    },
  }
}

demo 2

如何在Vue Js中点击按钮时动态添加文本框

1 个答案: