获取属性的值并在 Vue 中存储为数组

Question

我想获取属性的所有值并将其存储为数组。我试过这种方法

data() {
    return {
       roomList: null
    }
},
methods: {
     getRooms() {
        var that = this
        axios.get('http://localhost:3000/roomList')
              .then(function(response) {
                that.roomList = response.data
            })
        let roomLists = that.roomList.map(i => i.name) //getting the property values
        return roomLists;
    },

},
mounted: function () {
        this.getRooms()
},

我很确定我把 map 函数放错了地方。我试过将它放在 data 中，但效果不佳。我似乎无法弄清楚我应该把这个功能放在哪里。如果有人可以帮助我，我将不胜感激。谢谢。

Answer 1

我在这里要做的是将完整的 roomsList 数据保存在您的 data 属性中并创建一个计算的属性以仅提取保留的名称 in-sync 与支持数据。

您还应该将 roomsList 初始化为数组

export default {
  data: () => ({ roomsList: [] }),
  computed: {
    roomNames: ({ roomsList }) => roomsList.map(({ name }) => name)
  },
  methods: {
    async getRooms () {
      const { data } = await axios.get('http://localhost:3000/roomList');
      this.roomsList = data;
    }
  },
  mounted () {
    this.getRooms()
  },
};

您的模板可能看起来像这样

<ul>
  <li v-for="roomName in roomNames">{{ roomName }}</li>
</ul>

Answer 2

如果我理解正确，请看下面的代码片段：

new Vue({
  el: "#demo",
  data() {
    return {
       roomList: null
    }
  },
  computed: {
    roomLists() {
      return this.roomList?.map(i => i.name)
    }
  },
  methods: {
     getRooms() {
       axios.get('https://jsonplaceholder.typicode.com/users')
        .then((response) => {
          this.roomList = response.data
      })
    },
  },
  mounted() {
    this.getRooms()
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.26.1/axios.min.js" integrity="sha512-bPh3uwgU5qEMipS/VOmRqynnMXGGSRv+72H/N260MQeXZIK4PG48401Bsby9Nq5P5fz7hy5UGNmC/W1Z51h2GQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id="demo">
  {{roomLists}}
</div>

获取属性的值并在 Vue 中存储为数组

Get value of a property and store as array in Vue

javascript

vue.js

axios

获取 属性 的值并在 Vue 中存储为数组

Get value of a property and store as array in Vue

javascript

vue.js

axios

获取属性的值并在 Vue 中存储为数组