Quiero obtener todos los valores de una propiedad y almacenarlos como una matriz. he intentado de esta manera
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() }, Estoy bastante seguro de que puse la función de map en el lugar equivocado. He intentado ponerlo en los data pero no funciona tan bien. Parece que no puedo averiguar dónde debo poner esa función. Si alguien me puede ayudar, realmente lo agradecería. Gracias.
Lo que haría aquí es guardar los datos completos de la roomsList de habitaciones en su propiedad de data y crear una propiedad calculada para extraer solo los nombres que permanecen sincronizados con los datos de respaldo.
También debe inicializar la lista de roomsList como una matriz
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() }, };Su plantilla podría verse así
<ul> <li v-for="roomName in roomNames">{{ roomName }}</li> </ul>Si te entendí correctamente, echa un vistazo al siguiente fragmento:
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>