Question

我是JavaScript的新手。我试图弄清楚为我的应用程序编写控制逻辑的最佳方法是什么。我有一个复选框列表，隐藏和显示不同的元素取决于检查的某些选项。

例如，我有以下HTML：

Declare @R1 as money, @R2 as money, @R3 as money

Set @R1 = 100000 / 9 / 30
Set @R2 = @R1 * 9 * 30

select @R2 As 'ActualAmount'

然后我根据选中标记的项目隐藏/显示内容如上所述（这只是我需要检查的一些条件的一个例子）：

<label>
 <input type="checkbox" name="productType" value="magazines" v-model="selectedProductType"> Magazines 
     </label>
<label>
     <input type="checkbox" name="productType" value="books" v-model="selectedProductType"> Books 
     </label>
<label>
 <input type="checkbox" name="productType" value="comics" v-model="selectedProductType"> Comics 
 </label>
<label>
 <input type="checkbox" name="productType" value="videos" v-model="selectedProductType"> Videos 
 </label>
...snip...

问题是我必须检查数据/模型中的不同值，如下所示：

<section v-if="(selectedOffice.jira) && (selectedProductType == 'comics') || (selectedProductType == 'videos')" id="booksInfo">Some info here</section>
...snip...

有没有人对我的应用程序逻辑的最佳方法有任何建议？灵活性更好？我的计划是使用数据API（Wordpress JSON REST API），我将能够自己定制键/值属性，但需要有条件的帮助。

感谢您的帮助！

Answer 1

而不是使用v-model，而是使用@click或v-on:click来处理点击事件。我希望将大多数逻辑保留在Vue中而不是HTML中，因此我建议您使用methods和computed来确定要显示的数据。

const app = new Vue({
  el: '#app',
  data: {
    selectedProductTypes: { 
      magazines: false, 
      books: false, 
      comics: false, 
      videos: false 
    },
    productList: [],
    typeList: [
      {
        type: 'magazines',
        name: 'Magazines',
        text: 'Check out new magazines'
      },
      {
        type: 'books',
        name: 'Books',
        text: 'Check out new books'
      },
      {
        type: 'comics',
        name: 'Comics',
        text: 'Check out new comics'
      },
      {
        type: 'videos',
        name: 'Videos',
        text: 'Check out new videos'
      }
    ]
  },
  computed: {
    dataToBeShown() {
      return this.productList
        .filter(product => this.selectedProductTypes[product.type] === true) || [];
    }
  },
  created() {
    // get json data here
    // assignning data here for demo
    this.productList = [
      {
          type: 'magazines',
          url: 'www.magazineurl.com'
      },
      {
          type: 'books',
          url: 'www.booksurl.com'
      },
      {
          type: 'comics',
          url: 'www.comicsurl.com'
      },
      {
          type: 'videos',
          url: 'www.videosurl.com'
      }
    ]
  },
  methods: {
    selectProductType(input) {
      this.selectedProductTypes[input] = !this.selectedProductTypes[input];
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="app">
  <div class="control">
    <div v-for="item in typeList">
      <label>
        <input type="checkbox" @click="selectProductType(item.type)"> <b>{{item.name}}</b>&nbsp<span>{{item.text}}</span>
      </label>
    </div>
  </div>
  <hr/>
  <section v-for="item in dataToBeShown">
    <div>Type: {{item.type}}</div>
    <div>Url: {{item.url}}</div>
  </section>
</div>

VueJS2：使用JSON的控制逻辑？

1 个答案: