Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/templates/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Vue js在模板中使用v-for遍历对象_Javascript_Templates_Vue.js_V For - Fatal编程技术网

Javascript Vue js在模板中使用v-for遍历对象

Javascript Vue js在模板中使用v-for遍历对象,javascript,templates,vue.js,v-for,Javascript,Templates,Vue.js,V For,有人能帮我将下面的表达式转换为vue js v-for循环表达式吗。我已经提供了一个我在下面使用value和property name所做的示例 起初的 <ul class="nav nav-pills"> {% for opt, item in filterOptions %} <li class="dropdown" > <a class="dropdown-toggle" data-toggle="dropdown

有人能帮我将下面的表达式转换为vue js v-for循环表达式吗。我已经提供了一个我在下面使用value和property name所做的示例

起初的
<ul class="nav nav-pills">
    {% for opt, item in filterOptions %}
      <li class="dropdown" >
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
          aria-expanded="false">{{opt}}</a>
        <div class="dropdown-menu">
        {% for i in item %}
          <a href="#">
            <div class="inner">
              <div class="checkbox">
                <label class="filter-label-item">
                  <input type="checkbox" data-prop="{{opt}}" value="{{i.value}}" {% if i.checked %} checked {% endif %}/>
                  <span class="cr"><i class="cr-icon fa fa-check"></i></span>
                  <span>{{i.value}} <span class="badge badge-dark">{{i.count}}</span></span>
                </label>
              </div>
            </div>
          </a>
        {% endfor %}
        </div>
      </li>
      {% endfor %}
    </ul>
<ul class="nav nav-pills">
      <li class="dropdown" v-for="(value , propertyName) in filterOptions">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
          aria-expanded="false">{{propertyName}}</a>
        <div class="dropdown-menu" v-for="i in value.filterOptions">
          <a href="#">
            <div class="inner">
              <div class="checkbox">
                <label class="filter-label-item">
                  <input type="checkbox" data-prop="{{propertyName}}" value="{{i.value}}" {% if i.checked %} checked {% endif %} />
                  <span class="cr"><i class="cr-icon fa fa-check"></i></span>
                  <span>{{i.value}} <span class="badge badge-dark">{{i.count}}</span></span>
                </label>
              </div>
            </div>
          </a>
        </div> 
      </li>
var filterOptions = {
        year: [{ value: '2019', checked: true, count: 10 }, { value: '2013', checked: false, count: 99 }, { value: '2017', checked: true, count: 10 }],
        model: [{ value: 'Explorer', checked: true, count: 8 }, { value: 'Ram 1500', checked: false, count: 4 }, { value: 'Piloto', checked: false, count: 10 }],
        priceRange: [{ value: '$10,000-$20,000', checked: false, count: 5 }, { value: '$20,000-$30,000', checked: false, count: 22 }, { value: '$30,000-$40,000', checked: false, count: 10 }],
        mileage: [{ value: '1-1000', checked: false, count: 10 }, { value: '1001-2000', checked: false, count: 64 }, { value: '2001-3000', checked: false, count: 10 }],
        bodyStyle: [{ value: 'Crew Cab Pickup', checked: false, count: 13 }, { value: 'Quad Cab Pickup', checked: false, count: 9 }, { value: 'Sport Utility', checked: true, count: 2 }]
    }