Question

我对Vue（+ Vuex）很新，我有这个项目让我开始。这已经有一个多星期了，我开始掌握它了，但现在我偶然发现了这个让我感到困惑的问题..

我正在制作一个“设置”页面，其中页面的内容几乎是在一个数组之后呈现的，该数组定义了面板以及他们必须快速轻松地进行未来更改的字段。

页面呈现的settings数组的结构如下所示：

settings
|- panel ( or 'category' if you like )
  |- name
  |- text
  |- icon
  |- isOk
  |- fields
    |- name
    |- text
    |- isOk
    |- value

无论如何，内容会在几个nesten v-for循环中呈现，这些循环会读取settings数组的内容。页面面板的字段设置为v-model，它绑定到settings数组中的字段。但是当我操作v-model到field.value的输入字段时，它不会改变数组的value字段，而是添加一个带有输入字段值的新value字段。

为什么？没有任何意义..

输入更改之前/之后的数组屏幕截图

Settings.vue：

<template>
  <section class="section">
    <div class="conatiner">

      <div class="columns">
        <nav class="settings-list panel column is-one-quarter">
          <p class="panel-heading">
            <i class="fas fa-cogs"></i> settings
          </p>
          <a v-for="panel in settings" class="panel-block" @click=" currentPanel = panel " :class="{ 'is-active': currentPanel == panel }">
            <i :class=" panel.icon "></i> &nbsp; {{ panel.text }}
          </a>
        </nav>

        <nav v-if="currentPanel != null" class="settings-view panel column">
          <p class="panel-heading">
            {{ currentPanel.text }}
          </p>
          <div class="panel-block panel-content">
            <div v-for=" field in currentPanel.fields " class="settings-field">
              <label class="label subtitle is-4">{{ field.text }}</label>
              <input class="input title is-4" :class=" !field.isOk " :disabled=" field.name == 'username' " type="text" v-model=" field.value ">
            </div>
          </div>
          <div class="panel-block panel-footer">
            <a class="button is-success" :class=" { 'is-loading': isSaving } " :disabled=" !currentPanel.isOk "><i class="fas fa-save"></i></a>
          </div>
        </nav>
      </div>

    </div>
  </section>
</template>

<script>
let sha1 = require('sha1')

function numberWithSpaces(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ")
}

export default {
  name: 'settings',
  data () {
    return {
      title: 'Innstillinger',
      currentPanel: null,
      isSaving: false,
      settings: {
        personalDetails: {
          name: 'personalDetails',
          text: 'Personal details',
          icon: 'fas fa-user',
          isOk: true,
          fields: {
            username: {
              name: 'username',
              text: 'Username',
              value: 'mrMilkSteak69', //this.$store.state.users.user.username,
              isOk: true
            },
            firstname: {
              name: 'firstname',
              text: 'First name',
              value: 'Charlie', //this.$store.state.users.user.firstname,
              isOk: true
            },
            lastname: {
              name: 'lastname',
              text: 'Last name',
              value: 'Kelly', //this.$store.state.users.user.lastname,
              isOk: true
            }
          }
        },
        newPassword: {
          name: 'newPassword',
          text: 'New password',
          icon: 'fas fa-key',
          isOk: false,
          fields: {
            oldPassword: {
              name: 'oldPassword',
              text: 'Old password',
              value: null,
              isOk: true
            },
            newPassword: {
              name: 'newPassword',
              text: 'New password',
              value: null,
              isOk: true
            }
          }
        }
      }
    }
  },
  methods: {
    save: function () {

    }
  },
  beforeMount: function() {
    this.$store.dispatch( 'users/check').then( response => {
      if (!response) {
        this.$router.push("/login")
      }
    }, error => {
      console.log(error)
      this.$router.push("/login")
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import "../assets/theme";
@import "../assets/utils";
h1 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.green {
  color: green;
}
.red {
  color: red;
}
.settings-list {
  a {
    text-align: left;
  }
}
.panel-content {
  display: block;

  .settings-field {
    margin: 25px;

    label {
      margin-bottom: 0;
      padding-left: 9px;
      text-align: left;
    }
    .input {
      border-width: 0;
      margin-top: 0;
      border-bottom-width: 2px;
      padding-left: 9px;
      padding-top: 0;
      box-shadow: none;
    }
  }
  .panel-footer {
    position: relative;

    a.button {
      position: absolute;
      right: 0;
      width: 100px;
    }
  }
}
</style>

Answer 1

好的，所以我随机想出来了。

原来v-model并不想像这样引用数组元素：v-model="field.value"。

显然你必须这样做：v-model="field['value']" ..

对于整个考验仍然有点困惑，为什么它不能像那样工作，但嘿，我现在感觉很好。

Vue：嵌套数组中的v模型字段添加重复值而不是改变现有值

1 个答案: