Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/vue.js/6.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
Vue.js 使用最新buefy版本0.9.2在b表中出现问题?_Vue.js_Buefy - Fatal编程技术网

Vue.js 使用最新buefy版本0.9.2在b表中出现问题?

Vue.js 使用最新buefy版本0.9.2在b表中出现问题?,vue.js,buefy,Vue.js,Buefy,在使用b-table时,我面临最新版本的buefy(0.9.2)的问题。因此,基本上每当我的页面加载时,我都会收到错误消息,说无法读取未定义的生效日期。(即,props.row未定义)。请注意,我使用的前一版本的buefy(0.8.17)中没有出现此问题 我的页面(vue文件)- 似乎我们必须这样做: {{props.row.id} 而不是: {{props.row.id} 如果我发现其他问题,我会更新答案 更新:所以这不是一个错误,这是一个新的语法。“插槽位于每个表列中” 第9版中出现

在使用b-table时,我面临最新版本的buefy(0.9.2)的问题。因此,基本上每当我的页面加载时,我都会收到错误消息,说无法读取未定义的生效日期。(即,props.row未定义)。请注意,我使用的前一版本的buefy(0.8.17)中没有出现此问题

我的页面(vue文件)-


似乎我们必须这样做:

{{props.row.id}
而不是:


{{props.row.id}
如果我发现其他问题,我会更新答案

更新:所以这不是一个错误,这是一个新的语法。“插槽位于每个表列中”

第9版中出现了影响插槽使用方式的突破性更改:


{{props.row.name}
{{props.row.age}


{{props.row.name}
{{props.row.age}

我们是否只需要为b柱添加v形槽?来自的零件如何?
<template>
  <div class="container is-fluid">
    <b-loading :is-full-page="true" :active.sync="this.isLoading"></b-loading>
    <p class="subtitle">Bank Account Detail</p>
    <b-field label="ID">
      <b-input
        :disabled="true"
        :value="this.objectData.id"
        
      ></b-input>
    </b-field>
    <b-button @click="addTableRow('records', 'records')" class="is-radiusless">Add Bank Record</b-button>
     <!-- Begin Code Change:-Fixed delete row issue by refreshing table after adding key prop to the b-table-8-27-2020-vignesh --> 
    <b-table
      :key="componentKey"
      ref="records"
      :data="this.objectData.records"
      :hoverable="true"
      :paginated="true"
      :per-page="10"
      selectable
      @select="selected"
      detailed
      :show-detail-icon="true"
      icon-pack="mdi"
    >  
     <!-- End  Code Change:-Fixed delete row issue by refreshing table after adding key prop to the b-table-8-27-2020-vignesh -->   
      <template slot-scope="props">
        <b-table-column field="effectiveDate" label="Eff Date">{{ props.row.effectiveDate }}</b-table-column>
        <b-table-column field="accountType" label="Account Type">{{ props.row.accountType }}</b-table-column>
        <b-table-column>
          <b-button class="is-borderless is-borderless" @click="deleteTableRow('records','records',props.index)">
            <b-icon icon="delete"></b-icon>
          </b-button>        
        </b-table-column>     
      </template>
      <template slot="detail" slot-scope="props">
        <div class="container is-fluid">
          <b-field label="Effective Date">
            <b-datepicker
              :value="props.row.effectiveDate | toDate"
              @input="(newValue)=>{updateRowValue('records', props.index, 'effectiveDate', newValue)}"
              editable
            ></b-datepicker>
          </b-field>
          <b-field label="Account Type">
            <b-input
              :value="props.row.accountType"
              @input="(newValue)=>{updateRowValue('records', props.index, 'accountType', newValue)}"
            >
           </b-input>
          </b-field>
         
     <b-field label="Country">
        <b-autocomplete
          :value="props.row.country"
          :open-on-focus="true"
          :keep-first="true"
          :data="['India','United Kingdom','United States']"
          @input="(newValue)=>{updateRowValue('records', props.index, 'country', newValue)}"
          >
          <template slot="empty">No results found</template>
        </b-autocomplete>                          
      </b-field>


         <b-field label="Bank Name">
          <b-input
            :value="props.row.bankName"
            @input="(newValue)=>{updateRowValue('records', props.index, 'bankName', newValue)}"
          ></b-input>
        </b-field> 

         <b-field label="Branch Name">
          <b-input
            :value="props.row.branchName"
            @input="(newValue)=>{updateRowValue('records', props.index, 'branchName', newValue)}"
          ></b-input>
        </b-field>  


        <b-field label="Bank Account Number">
          <b-input
            :value="props.row.bankAccountNumber"
            @input="(newValue)=>{updateRowValue('records', props.index, 'bankAccountNumber', newValue)}"
          ></b-input>
        </b-field>

        <b-field label="IFSC">
          <b-input
            :value="props.row.ifsc"
            @input="(newValue)=>{updateRowValue('records', props.index, 'ifsc', newValue)}"
          ></b-input>
        </b-field>                    
                                                                        
        </div>
      </template>
    </b-table>
    <section>
      <p class="is-size-7 has-text-danger">{{submitError}}</p>      
      <b-button @click="submitForm" class="is-radiusless">Submit</b-button>
      <b-button type="is-text" @click="$router.go(-1)" class="is-radiusless">Return</b-button>
    </section>
  </div>
</template>

{
  "name": "page-core",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --port 80",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.24",
    "@fortawesome/free-solid-svg-icons": "^5.11.1",
    "@fortawesome/vue-fontawesome": "^0.1.7",
    "axios": "^0.20.0",
    "buefy": "^0.8.17",
    "connect-history-api-fallback": "^1.6.0",
    "core-js": "^2.6.5",
    "cors": "^2.8.5",
    "debounce": "^1.2.0",
    "lodash": "^4.17.15",
    "lodash.debounce": "^4.0.8",
    "mxgraph": "^4.2.0",
    "socket.io": "^2.3.0",
    "vue": "^2.6.11",
    "vue-google-charts": "^0.3.2",
    "vue-json-editor": "^1.4.2",
    "vue-material-design-icons": "^4.2.0",
    "vue-router": "^3.4.3",
    "vue2-editor": "^2.10.2",
    "vuex": "^3.5.1",
    "vuex-persistedstate": "^3.1.0",
    "xml2js": "^0.4.22"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.10.0",
    "@vue/cli-plugin-eslint": "^3.10.0",
    "@vue/cli-service": "^3.10.0",
    "@vue/eslint-config-standard": "^4.0.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.1.0",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "@vue/standard"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

<b-table :data="myData">
    <template slot-scope="props">
        <b-table-column field="name" label="Name">
            {{ props.row.name }}
        </b-table-column>
        <b-table-column field="age" numeric label="Age">
            {{ props.row.age }}
        </b-table-column>
    </template>
</b-table>
<b-table :data="myData">
    <b-table-column field="name" label="Name" v-slot="props">
        {{ props.row.name }}
    </b-table-column>
    <b-table-column field="age" label="Age">
        <template v-slot:default="props">
            {{ props.row.age }}
        </template>
    </b-table-column>
</b-table>