vue雙向綁定一個(gè)對(duì)象,失效

在表單里使用v-model綁定了一個(gè)對(duì)象,之前使用的時(shí)候都沒(méi)有出現(xiàn)過(guò)這種.
正常的應(yīng)該全部屬性打印出來(lái),現(xiàn)在雙向綁定全部失效了,下拉菜單全都選不上了;除非用單屬性,而不是放到一個(gè)對(duì)象上.

圖片描述

<template>
  <div class="app-container">
    <!--周期統(tǒng)計(jì)-->
    <div class="count">
      <div style="padding: 10px;">
        <h2><span>周期統(tǒng)計(jì)</span><el-button @click="refUserCount()" size="small"  type="primary">
          <i class="iconfont icon-shuaxin" style="font-size:12px"></i>刷新</el-button></h2>
        <ul v-if="userCount" class="Grid">
          <li @click="$router.push({path:'/Operative/addday'})" style="cursor: pointer" class="Grid-cell Grid-cell.u-full">
            <div>
              <p><span>{{userCount.phoneRegTotal}}</span> / {{userCount.autoRegTotal}} / {{userCount.allTotal}}</p>
              <h4><span>注冊(cè)用戶</span> / 分配賬號(hào) / 用戶總數(shù)</h4>
            </div>
          </li>
          <li @click="$router.push({path:'/Operative/addday'})" style="cursor: pointer" class="Grid-cell Grid-cell.u-full">
            <div>
              <p><span>{{userCount.todayPhoneRegTotal}}</span> / {{userCount.todayAutoRegTotal}} / {{userCount.todayTotal}}</p>
              <h4><span>今日新增注冊(cè)</span> / 今日新增分配 / 今日新增用戶總數(shù)</h4>
            </div>
          </li>
          <li @click="$router.push({path:'/Operative/addday'})" style="cursor: pointer" class="Grid-cell Grid-cell.u-full">
            <div>
              <p><span>{{userCount.currentOnlineTotal}}</span> / {{userCount.totalOnlineTop}} / {{userCount.historyOnlineTop}}</p>
              <h4><span>當(dāng)前在線人數(shù)</span> / 當(dāng)天最高 / 歷史最高</h4>
            </div>
          </li>                            
          <li @click="$router.push({path:'/Operative/activeday'})" style="cursor: pointer" class="Grid-cell">
            <div>
              <p>{{userCount.todayActiveTotal}}</p>
              <h4>今日活躍人數(shù)</h4>
            </div>
          </li>         
        </ul>
      </div>
    </div> 
    <!-- 篩選 -->
    <div class="public_nav">    
        <jg-systematics-border title="篩選 / 搜索">
          <div style="margin:10px 0">
            <div class="warp">
              <span>用戶類型<i class="iconfont icon-maohao1"></i></span>
              <el-select v-model="filter.useAccount" clearable placeholder="用戶類型">
                <el-option label="全部" value=""></el-option>
                <el-option label="分配賬號(hào)" value="0"></el-option>
                <el-option label="注冊(cè)賬號(hào)" value="1"></el-option>
              </el-select>              
            </div>            
            <div class="warp">
              <span>渠道<i class="iconfont icon-maohao1"></i></span><jg-version @parentDate="cutoverVersion"></jg-version>
            </div>
            <div class="warp">
              <span>版本<i class="iconfont icon-maohao1"></i></span><jg-channel @parentDate="cutoverChannel"></jg-channel>
            </div>
            <div class="warp">
              <span>用戶狀態(tài)<i class="iconfont icon-maohao1"></i></span>
              <el-select v-model="filter.status" clearable placeholder="處理狀態(tài)">
                <el-option label="全部" value=""></el-option>
                <el-option label="正常" value="1"></el-option>
                <el-option label="封號(hào)" value="0"></el-option>
              </el-select>             
            </div>
            <div class="warp">
              <span>時(shí)間類型<i class="iconfont icon-maohao1"></i></span>
              <el-select v-model="filter.dateType" clearable placeholder="時(shí)間類型">
                <el-option label="全部" value=""></el-option>
                <el-option label="登錄時(shí)間" value="login"></el-option>
                <el-option label="注冊(cè)時(shí)間" value="register"></el-option>
              </el-select> 
              <jg-date-picker  @parentDate='getChildData' :filter='initDate'></jg-date-picker>
            </div> 
            <div class="warp">
              <el-button class="el-icon-search" @click="Inquire">篩選</el-button>
            </div>           
          </div> 
          <div style="margin:10px 0">
            <div class="warp">
              <span>賬號(hào)搜索<i class="iconfont icon-maohao1"></i></span>
              <el-input placeholder="請(qǐng)輸入內(nèi)容" v-model="filter.keyword" style="width: 350px">
                <el-select v-model="filter.userType" slot="prepend" placeholder="請(qǐng)選擇" style="width: 160px">
                  <el-option label="賬號(hào)名" value="name"></el-option>
                  <el-option label="賬號(hào)名ID" value="id"></el-option>
                  <el-option label="賬號(hào)名UUID" value="uuid"></el-option>
                </el-select>
              </el-input>         
            </div> 
            <div class="warp">
              <el-button class="el-icon-search" @click="Inquire">搜索</el-button>
            </div>           
          </div>                       
        </jg-systematics-border>         
    </div>   
    <!-- 表格 -->
    <div>
      <p style="text-align: left;margin-left: 5px">用戶列表:<span
        style="font-size: 16px;color: red">{{pagination.total}}</span>條結(jié)果
      </p>
      <el-table
        :data="tableData"
        border
        stripe
        style="width: 100%">
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="name" label="賬號(hào)"></el-table-column>
        <el-table-column prop="uuid" label="UUID"></el-table-column>
        <el-table-column prop="reg_time" label="注冊(cè)時(shí)間">
          <template scope="scope">
            {{scope.row.reg_time}}
          </template>
        </el-table-column>
        <el-table-column label="注冊(cè)版本">
          <template scope="scope">
            {{scope.row.channel}}_{{scope.row.edition}}_{{scope.row.app_version}}
          </template>
        </el-table-column>
        <el-table-column prop="last_login_time" label="登錄時(shí)間">
          <template scope="scope">
            {{scope.row.last_login_time}}
          </template>          
        </el-table-column>
        <el-table-column prop="app_channel" label="登錄版本"></el-table-column>
        <el-table-column prop="expiration" label="到期時(shí)間"></el-table-column>
        <el-table-column prop="total_amount" label="充值金額"></el-table-column>
        <el-table-column prop="status" label="用戶狀態(tài)">
          <template scope="scope">
            <el-tag :type="scope.row.status === 1 ? 'success' : 'primary'"
              close-transition>{{scope.row.status === 1 ? '正常' : '封號(hào)'}}
            </el-tag>
          </template>          
        </el-table-column>
        <el-table-column prop="date" label="詳情" width="80" fixed="right">
          <template scope="scope">
            <el-button size="small" @click="detail(scope.row)">詳情</el-button>
          </template>          
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        layout="total, prev, pager, next, jumper"
        :page-size="pagination.pageSize"
        :total="pagination.total"
        class="page">
      </el-pagination>            
    </div> 
  </div>
</template>

<script>
import { monthTimes } from '@/utils/index'
import * as API from 'api/userlist'
export default {
  data() {
    return {
      userCount: {},
      initDate: {
        start: '',
        end: ''
      },
      filter: {
        useAccount: '',
        status: '',
        channel: '',
        edition: '',
        dateType: '',
        startTime: '',
        endTime: '',
        userType: 'name',
        keyword: ''
      },
      tableData: [],
      pagination: {
        pageSize: 15,
        currentPage: 1,
        total: 0
      }
    }
  },
  methods: {
    refUserCount() {
      this._getUserListAccountTotal()
    },
    getChildData(val) {
      this.initDate = val
    },
    cutoverVersion(val) {
      this.filter.edition = val
    },
    cutoverChannel(val) {
      this.filter.channel = val
    },
    Inquire() {
      this._getUserListAccountList()
    },
    handleCurrentChange(val) {
      this.pagination.currentPage = val
      this._getUserListAccountList()
    },
    detail(row) {
      console.log(row)
    },
    _getUserListAccountTotal() {
      API.fetchUserListAccountTotal().then(res => {
        if (res.data.status === 'success') {
          this.userCount = Object.assign({}, res.data.data)
        }
      })
    },
    _getUserListAccountList() {
      if (!this.filter.keyword) {
        this.filter.userType = ''
      }
      API.fetchUserListAccountList(this.filter).then(res => {
        if (res.data.status === 'success') {
          this.tableData = res.data.data.data
          this.pagination.total = res.data.data.total
          this.filter.userType = 'name'
        }
      })
    }
  },
  mounted() {
    console.log(this.filter)
    this.initDate = monthTimes()
    this._getUserListAccountTotal()
    this._getUserListAccountList()
  }
}
</script>