javascript - 为 bootstrap nuxt、js vue.js 重建动态菜单

Question

为 bootstrap nuxt、js vue.js 重建动态菜单

<template>
  <div>
    <br />
    <b-container fluid="md">
      <div class="mt-3" align="right">
        choose kind : <strong>{{chtra.options.filter(val => val.value == chtra.selected)[0].text}}</strong>
      </div>
      <br />
      <b-form-select
        @input="searchSubGroup"
        v-model="chtra.selected"
        :options="chtra.options"
        value-field="value"
        text-field="text"
        class="mt-3"
      ></b-form-select>
      <br />
      <div>
        <br />
        <b-form inline>
          <div class="mr-auto ml-auto">
             <div class="mt-3" align="right">
              aaa: <strong>{{ chdays.selected }}</strong>
            </div>
            <b-form-select
              v-model="chdays.selected"
              :options="chdays.options"
            ></b-form-select>
          </div>
          <div class="mr-auto ml-auto">
            <div class="mt-3" align="right" keep-alive> 
              bbb: <strong>{{ chmo.selected }}</strong>
            </div>

            <b-form-select
              v-model="chmo.selected"
              :options="chmo.options"
            ></b-form-select>

          </div> 
        </b-form>
      </div>
      <br />
      <div>
        <b-button variant="primary" block>dooo</b-button>
      </div>
    </b-container>
  </div>
</template>
<script>
import cmd from '@/static/cmd.json'
function  changemonthes(value) {
  return cmd.mounthes[value];
}
export default {

  name: "index",
  methods: {
    searchSubGroup(value) {
 xxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxx
    },
  },
  data() {
    console.log("data--------")
    return {
      chmo: cmd.mounthes.galali,
      chtra: {
        selected: "galali",
        options: [{
            value: "bbbbbbbbbbbbbb",
            text: " bbbbbbbbbbbbbbb",
          },
          {
            value: "cccccccccccccccccccccccc",
            text: "ccccccccccccccccccccccc",
          },
          {
            value: "ddddddddddddddddddddddd",
            text: "ddddddddddddddddddddddd",
          },
        ],
      },
      chdays: cmd.days,
    };
  },
};
</script>

这是 cmd.json 的 -e 包含

{ 
  "mml" :{
    "galali": {
      "selected": "please choose",
      "options": [
        { "value": "please choose", "text": "please choose", "disabled": true },
        {
          "value": { "txt": "ff", "exparam": "1" },
          "text": "ff"
        },
        {
          "value": { "txt": "oo", "exparam": "2" },
          "text": "oo"
        }
      ]
    },
    "ggr": {
      "selected": "please choose",
      "options": [
        { "value": "please choose", "text": "please choose", "disabled": true },
        {
          "value": { "txt": "jj", "exparam": "1" },
          "text": "jj"
        },
        {
          "value": { "txt": "ff", "exparam": "2" },
          "text": "ff"
        }
      ]
    },
    "arr": {
      "selected": "please choose",
      "options": [
        { "value": "please choose", "text": "please choose", "disabled": true },
        {
          "value": { "txt": "mm", "exparam": "1" },
          "text": "mm"
        },
        {
          "value": { "txt": "mm", "exparam": "2" },
          "text": "mm"
        }
      ]
    }
  },
  "dda" : {
    "selected": "please choose",
    "options": [
      { "value": " please choose", "text": " please choose", "disabled": true },
      {
        "value": "1",
        "text": " 1"
      },
      {
        "value": "2",
        "text": "2"
      },
      {
        "value": "3",
        "text": "3"
      }
    ]
  }
  }

问题是我想更改“bbb”的包含或使用另一个单词 chmo.selected 通过选择“选择种类：”这意味着我将拥有动态菜单我在 xxxxxxxxxxxxxxxxxxxxxxxx 写的地方有什么变化或如何我再次回忆 data() 函数。

标签： javascriptvue.jsnuxt.js