1

new Vue({
		el: '#app',
		methods: {
			create() {
				var persons= {
				id: this.id,
				name: this.name,
				email: this.email,
				website: this.website
				}
			}
		},
		methods: {
			clickInfo: function () {
				btn: false;
				console.log(persons);
			}
		},
		data() {
			return {
				btn: true, 
				id: '11',
				name: 'Yark',
				email: '[email protected]',
				website: 'google.com'
			}
		}
	})
	<div id="app">
		<ul>
			<!-- <li v-for="person in persons">{{person}}</li> -->
			<button v-show="btn" @click="clickInfo">Show information</button>
		</ul>
	</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

создать обьект юзера с ключами id name +добавить кнопку инфо около каждого юзера при клике на инфо - информация о человека

1 ответ 1

2

Он тебе пишет что что локальная переменная "persons" не найдена! Error in v-on handler: "ReferenceError: Can't find variable: persons"

В коде надо использовать - this.persons!

Для обработки массива используй v-for, если ты используешь динамичное изменение массива то с ключем v-bind:key где будет уникальное значение.

Для вывода блоков с схожим контекстом - лучше всего использовать компоненты. Как передать props и вернуть events в примере тоже есть. Важно понимать что компоненты не должны влиять на верхний объект напрямую - лучше всего это делать через $emit.

ps: Если не нравиться темплейт компонентов в JS, то можно воспользоваться этим - https://jsfiddle.net/coligo/fjpqz387/ фиддлом и отделить HTML от JS полностью.

const InformationButton = {
  name: "informationbutton",
  props: ['data'],
  data() {
    return {
      textMode: false,
    }
  },
  methods: {
    emitExample($event) {
      this.$emit('view-state-change', $event, this.textMode, this.data);
    }
  },
  template: `<span class="box">
  <span v-if="textMode">{{data}}</span>
  <span v-else>
    <button @click="textMode =! textMode; emitExample($event)">Show information</button>
  </span>
</span>`
};

new Vue({
  el: '#app',
  data: {         // Хочу отдельно заметить - у контроллера не нужен return
    persons: [{
      id: '11',
    	name: 'Yark',
    	email: '[email protected]',
    	website: 'google.com'
    },{
      id: '12',
    	name: 'Vinny Puh',
    	email: '[email protected]',
    	website: 'example.net/puh'
    }]
  },
  components: {
    informationbutton: InformationButton
  },
  methods: {
    onViewStateChanged($event, state, data) {
      console.log(state, data);
    }
  }
});
<div id="app">
  <ul>
    <li v-for="person in persons" v-bind:key="person.id">
      <informationbutton v-bind:data="person" @view-state-change="onViewStateChanged" />
    </li>
  </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

3
  • немного не так сначала мы отображаем параметры а потом ключи параметров 20 фев 2020 в 19:29
  • Persons изначально должны быть массивом - пусть хоть пустым. Ты его используешь в v-for... После уже можешь его заполнить через this.persons.push(Object.assign({id: "newId"}, this.newPerson) где соответсвенно newPerson это ссылка на {{ newPerson.name }}, {{ newPerson.eMail }}
    – Eugene X
    20 фев 2020 в 19:53
  • наверное но можно это без компонента написать пожалуйста по моим примером 20 фев 2020 в 20:32

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.