Как визуализировать компонент в v-for кнопкой от родителя
Я не стал бы путать тесты capybara с HTML-линией. В данный момент это может показаться умным, так как вы получаете список URL-адресов для проверки бесплатно с каждым тестом, но:
- Вы, вероятно, будете набирать каждый URL несколько раз, потому что некоторые тесты проходят через него
- Вы можете получить сбои, потому что HTML не идеален, хотя функция, которую вы тестируете, на самом деле хорошо.
У вас, вероятно, есть что-то вроде sitemap.xml или другого источники всех доступных URL-адресов. Я бы использовал его, чтобы сделать отдельную проверку, которая будет простой: запросите URL-адрес, напишите ответ. Прополощите и повторите.
Если вы все еще не уверены, попробуйте использовать page.html и сделайте это как
expect(page.html).to pass_linter
https://github.com/teamcapybara/capybara# debugging
Затем вы можете добавить его в качестве around для каждой спецификации type: :feature.
ИЗМЕНИТЬ: вот еще одно обходное решение, чтобы иметь каждый посещенный путь. Просто проанализируйте файл журнала сервера (например, этот cat log/devlopment.log | grep path), чтобы получить полный список, если посетили пути:
method=POST path=/users/login format=html controller=SessionsController action=create
status=302 duration=256.82 view=0.00 db=52.29 location=http://0.0.0.0:3000/platform/admin/dashboard params={"utf8"=>"✓", "authenticity_token"=>"ubGnWKOq8gbUE5C/aK375QQn5DpjHarUYxHtBLglGe6Lr9Ie3O5XPq90k5gr/SZbIPoDiiasvY0mGlwhzD/MsQ==", "user"=>{"email"=>"alex-3d51048235c9d1a8@toptal.io", "password"=>"[FILTERED]", "remember_me"=>"0"}, "commit"=>"Log in"} uid=983 remote_ip=127.0.0.1 x_forwarded_for= x_request_id=
method=GET path=/admin/dashboard format=html controller=XXX action=show status=200 duration=3285.54 view=1051.32 db=2016.87 params={} uid=983 remote_ip=127.0.0.1 x_forwarded_for= x_request_id=
и использовать его для литинга.
3 ответа
Вы должны хранить информацию о состоянии каждого элемента (если он был нажат) в ваших данных. Затем, когда вы нажимаете на кнопку, вы должны обновить свойство clicked для определенного элемента. Наконец, если item.clicked установлен в true, вы покажете свой дочерний компонент (или любой другой html).
<template>
<div>
<div v-for="item in items" :key="item.id">
<button @click="item.clicked = true" >Show child</button>
{{item.name}}
<div v-if="item.clicked">Item child</div>
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data: function() {
return {
items: [
{
id: 1,
name: 'test1',
clicked: false
},
{
id: 2,
name: 'test2',
clicked: false
},
{
id: 3,
name: 'test3',
clicked: false
}
]
}
}
}
</script>
Вы можете воспользоваться индексом item ..., доступным в директиве v-for (например, v-for="(item, i) in items"), чтобы связать его (индекс элемента) с функцией, которая показывает элемент, изменив его свойство. :
Обновление : первоначальный ответ был удален после уточнения требований.
Поскольку вы предпочитаете не менять элементы, вы можете заключить их в объект Map (как ключи) и сохранить параметры видимости отдельно в качестве значений Map. К сожалению, насколько мне известно, на данный момент Vue.js не поддерживает реактивность для Map объектов, поэтому мне приходится запускать рендеринг вручную, используя forceUpdate:
Vue.config.devtools = false;
Vue.config.productionTip = false;
Vue.component('child', {
template: '<p>Visible child</p>'
})
new Vue({
el: "#demo",
template: `
<div>
<div v-for="item in items">
<button @click="toggleChild(item)">Toggle child</button>
<div>{{item.name}}</div>
<child v-if="isVisible(item)" :item="item"></child>
</div>
</div>
`,
data () {
return {
itemsMap: new Map(
[
{ name: 'test1' },
{ name: 'test2' }
].map(item => [item, { visible: false }])
)
};
},
methods: {
toggleChild(item) {
this.itemsMap.set(item, { visible: !this.itemsMap.get(item).visible });
this.$forceUpdate();
},
isVisible(item) {
return this.itemsMap.get(item).visible;
}
},
computed: {
items: function() {
return Array.from(this.itemsMap.keys());
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo"></div> Понятно и просто, вам просто нужно установить какой-нибудь флаг для последних v-if:
<div id="app">
<div v-for="item in items">
<button @click="$set(item, 'shown', true)">Show child</button>
<div>{{ item.name }}</div>
<div v-if="item.shown">Child component</div>
</div>
</div>
Здесь используется $set(), потому что у начального item может отсутствовать поле shown, поэтому установите его непосредственно с item.shown=true не будет реагировать.
Вы также можете скрыть кнопку после щелчка:
<button @click="$set(item, 'shown', true)" v-if="!item.shown">Show child</button>
Чтобы переключить видимость , вам просто нужно сделать это так:
<button @click="$set(item, 'shown', !item.shown)">
{{ item.shown ? 'Hide' : 'Show' }} child
</button>