Javascript Vue:数据存储中的初始复选框状态

我调用一个收集JSON对象的api。在该对象内，我得到如下值：

extensionStore:Object
    currentExtension:Object
        callForward:Object
            destination:"123456"
            voicemail:"false"
        directoryNumber:"2001"
        id:"c494b26f-0f3b-f71d-379e-5a79ce96cf85"
        routePartition:"LOC1_Internal_RPT"

    if (!destination == null) {
        "destination" is checked}
   else if (voicemail == true) {
        "voicemail" is checked}
   else { checked == false }

然后我做一个这样的检查：

extensionStore:Object
    currentExtension:Object
        callForward:Object
            destination:"123456"
            voicemail:"false"
        directoryNumber:"2001"
        id:"c494b26f-0f3b-f71d-379e-5a79ce96cf85"
        routePartition:"LOC1_Internal_RPT"

    if (!destination == null) {
        "destination" is checked}
   else if (voicemail == true) {
        "voicemail" is checked}
   else { checked == false }

我的商店：

const state = {
  extensionList: {},
  currentExtension: null,
}

const getters = {
  hasVoicemail: state => {
    Boolean(state.currentExtension.callForward.voicemail)
  },
  hasDestination: state => {
    Boolean(state.currentExtension.callForward.destination)
  },
  extensionId: state => {
    return state.currentExtension.callForward.currentExtension.id
  }
}

const mutations = {
  SET_EXTENSION_LIST (state, extensionList) {
    state.extensionList = extensionList
  },
  SET_CURRENT_EXTENSION (state, currentExtension) {
    state.currentExtension = currentExtension
  }
}

const actions = {
  setExtensionList: ({commit}, extensionList) => {
    const authUser = JSON.parse(window.localStorage.getItem('authUser'))
    let authData = authUser.user
    return Vue.http.get(extensionsUrl + authData, {headers: getHeader()})
      .then(response => {
        commit('SET_EXTENSION_LIST', response.data)
    })
  },
  setCurrentExtension: ({commit}, currentExtension) => {
    commit('SET_CURRENT_EXTENSION', currentExtension)
  }
}

尝试使用currentExtension.vue中的数据

<form v-on:submit.prevent="handleExtensionFormSubmit()">
  <h4>Currently Editing Line: {{extensionStore.currentExtension.directoryNumber}}</h4>
  <input type="checkbox" v-model="checked"/>
  <label for="click_me">Forward All Calls to:</label>
  <input type="radio" id="one" value="Voicemail" v-bind:disabled="!checked" v-model="checkedValue">
  <label for="one">Voicemail</label>
  <input type="radio" id="two" value="Destination" v-bind:disabled="!checked" v-model="checkedValue">
  <label for="two">Destination</label>
  <input type="text" v-model="destinationNumber" v-bind:disabled="!checked">
  <button class="button" type="submit" name="button" v-bind:disabled="!checked">Submit</button>
</form>

JSfiddle：

---

我一辈子都不知道如何从复选框和收音机中获取请求的值。非常感谢您的帮助。

您可以使用或从存储中选择所需的数据片段，并将它们映射到组件上的计算属性。然后，您可以将计算属性绑定到组件中的输入。编辑我的帖子：我确实使用了它，但我不清楚如何映射它们。您的状态树是什么样子的？我假设

callForward

对象位于

extensionStore

内部。我编辑了我的文章以提高可读性：extensionStore>currentExtension>callForward>destination&&voicemail您可以编写名为：

hasDestination

，

hassvoicemail

的getter。每个getter看起来像这样（例如

hasDestination

）：

state=>Boolean（state.extensionStore.currentExtension.callForward.destination）

。然后可以使用

mapGetters

将其映射到组件。然后将

hasDestination

绑定到相关输入。