Question

我的问题是，当我更改currentTable时，Crud-Table组件没有刷新。当我在currentTable = 'doctor'处分配created ()时。它有效，但不在这里。为什么？

<template>
  <div id="adminpanel">
    <div id="tabs">
      <button
        v-for="tableName in tables"
        :key="tableName"
        @click="switchTo(tableName)"
        >{{ tableName }}
      </button>

      <crud-table :tableName="currentTable"/>
    </div>
  </div>
</template>

<script>
import CrudTable from './CrudTable.vue'

export default {
  name: 'AdminPanel',
  data () {
    return {
      tables: ['user', 'doctor'],
      currentTable: 'user'
    }
  },
  methods: {
    switchTo: function (tableName) {
      this.currentTable = tableName
    }
  },
  components: {
    CrudTable
  }
}
</script>

编辑：它不是重复的，因为我丝毫没有拼错道具名称。当我将其设置为其他初始值时，它会起作用。

这是我的CrudTable组件：

<template>
  <table id="crudtable">
      <tr>
        <th>Akcje</th>
        <th v-for="h in header" :key="h">
          {{ h }}
        </th>
      </tr>
      <tr v-for="row in rows" :key="row.id">
        <td>
          <span class="action edit">E</span>
          <span @click="save(visible(row))" class="action save">S</span>
          <span class="action delete">D</span>
        </td>
        <td v-for="cell in ordered(visible(row))" :key="cell.name">
          <input v-model="cell.value" type="text"/>
        </td>
      </tr>
  </table>
</template>

<script>
import {HTTP} from '../http-common'
import {popUp} from '../utils'

export default {
  name: 'CrudTable',
  props: ['tableName'],
  data () {
    return {
      rows: [],
      header: [],
      chunkSize: 10
    }
  },
  computed: {
    endpoint: function () {
      return `/api/${this.tableName}`
    }
  },
  methods: {
    visible: function (row) {
      let ret = {}
      for (let prop in row) {
        if (!prop.startsWith('_')) {
          ret[prop] = row[prop]
        }
      }
      return ret
    },
    ordered: function (row) {
      let ret = []
      for (let col of this.header) {
        ret.push({name: col, value: row[col]})
      }
      return ret
    },
    fillTable: function () {
      let self = this
      let link = `${this.endpoint}/?page=0&size=100`
      HTTP.get(link)
        .then(function (response) {
          self.rows = response.data
        })
        .catch(function (err) {
          console.log(err.response)
        })
    },
    fillHeader: function () {
      let self = this
      HTTP.get(self.endpoint)
        .then(function (response) {
          self.header = Object.keys(response.data)
        })
        .catch(function (err) {
          console.log(err.response)
        })
    },
    save: function (row) {
      HTTP.patch(this.endpoint, row)
        .then(function (response) {
          popUp('ok', `Zapisano obiekt o id ${row.id}`)
        })
        .catch(function (err) {
          console.log(err.response)
        })
    }
  },
  beforeMount () {
    this.fillTable()
    this.fillHeader()
  }
}
</script>

Answer 1

如果我的理解正确，您想知道为什么CrudTable.fillTable()发生变化（取决于CrudTable.endpoint）时为什么不调用CrudTable.tableName。问题是fillTable()只是一种方法，不是被动的。 fillTable()仅在通话时评估endpoint。

如果您希望fillTable()更改时调用endpoint，则需要在其上添加watcher：

watch: {
  endpoint(value) { // <-- called when endpoint computed prop changes
    this.fillTable(value);
  }
},
methods: {
  fillTable(endpoint) {
     // http.get(`${endpoint}/users`)
  }
}

demo

Answer 2

可能的问题是您应该使用...

[Test]
public async Task MultipleSplitOn()
{
    // Arrange
    using (var conn =new SqlConnection("Data Source=YourDb"))
    {
        await conn.OpenAsync();

        var sql = @"SELECT TOP 10 c.[Id] as CountryId
                    ,c.[Name]
                    ,s.[Id] as States_StateId
                    ,s.[Name] as States_Name
                    ,ct.[Id] as States_Cities_CityId
                    ,ct.[Name] as States_Cities_Name
                FROM Country c 
                JOIN State s ON s.[CountryId] = c.[Id]
                JOIN City ct ON ct.[StateId] = s.[Id] ";

        // Act
        dynamic result = await conn.QueryAsync<dynamic>(sql);

        Slapper.AutoMapper.Configuration.AddIdentifiers(typeof(Country), new [] { "CountryId" });
        Slapper.AutoMapper.Configuration.AddIdentifiers(typeof(State), new [] { "StateId" });
        Slapper.AutoMapper.Configuration.AddIdentifiers(typeof(City), new [] { "CityId" });

        var countries = (Slapper.AutoMapper.MapDynamic<Country>(result) as IEnumerable<Country>).ToList();

        //Assert
        Assert.IsNotEmpty(countries);
        foreach (var country in countries)
        {
            Assert.IsNotEmpty(country.States);

            foreach (var state in country.States)
            {
                Assert.IsNotEmpty(state.Cities);
            }
        }
    }
}

public class Country
{
    public int CountryId { get; set; }

    public string Name { get; set; }

    public List<State> States { get; set; }
}

public class State
{
    public int StateId { get; set; }

    public string Name { get; set; }

    public List<City> Cities { get; set; }
}

public class City
{
    public int CityId { get; set; }

    public string Name { get; set; }
}

而不是...

<crud-table :table-name="currentTable"/>

我记得属性必须是kabobcase。

Answer 3

由于它可以与created（）一起使用，因此可以尝试使用vuex存储数据或使用事件总线告诉CrudTable重新渲染

组件不会在属性更改时刷新

3 个答案: