помогите реализовать переход по нажатию на изображение

[cubano]

Здравствуйте !

Помогите пожалуйста сделать так чтоб при нажатии на изображение переходило по силке.

https://codepen.io/Bobdacious/pen/qZJroM

Извиняюсь за такой нубовский для кого то вопрос!

Заранее благодарен!

[Coriolan161]

cubano,
Вот че есть там:
html

<img v-bind:src="i.image" />

js

products: [
            {
                "id": "0",
                "product": "Asus GeForce GTX 980Ti DS3 Strix",
                "price": 559.99,
                "category": "Graphics Card",
                "image": "https://www.overclockers.co.uk/media/image/thumbnail/GX388AS_119199_105x105.jpg",
                "inCart": false
            },
//...

Делаешь так:

<a v-bind:href="i.url"><img v-bind:src="i.image" /></a>

products: [
            {
                "id": "0",
                "product": "Asus GeForce GTX 980Ti DS3 Strix",
                "price": 559.99,
                "category": "Graphics Card",
                "image": "https://www.overclockers.co.uk/media/image/thumbnail/GX388AS_119199_105x105.jpg",
            "url": "http://javascript.ru/forum/dom-window/64989-pomogite-realizovat-perekhod-po-nazhatiyu-na-izobrazhenie.html",   // <--- 
                "inCart": false
            },
// ...

Урл для каждого продукта

[cubano]

Огромное СПАСИБО !!!

Все получилось !

Но я не могу понять где скрывается весь html код!?
При просмотре кода в редакторе хром его видно, а в исходнике его нет!?
В каком месте его можно редактировать?

[Coriolan161]

cubano,
ты про что? какие исходники?

Если я правильно понял, то тебе непонятно:
в верстке есть:

<ul>
        		<li v-for="i in products | searchFor searchString | filterBy selectedCategory in 'category'">
            		<img v-bind:src="i.image" />
            		<p>{{i.product}}</p>
            		<p>£{{i.price}}
            			<select v-model="quantity[i.id].quantity" number>
            				<option selected>1</option>
            				<option>2</option>
            				<option>3</option>
            				<option>4</option>
            				<option>5</option>
            			</select>
            			<button id="GPU" class="categories" @click="addToCart(i.id)">Add To Cart</button>
            		</p>
        		</li>
    		</ul>

тут типа один <li>...
а когда открываешь просмотр DOM, то там дофига <li></li> ?

Короче: когда используешь v-for (или в ангуляре ng-repeat) он связывает каждый элемент коллекции (products) с html-шаблоном (выше смотри) и запихивает это все в DOM дерево через DocumentFragment.
Сколько у тебя продуктов столько у тебя и будет элементов списка (ну в зависимости от того куда повесить v-for)

[cubano]

Просто я хочу к каждому товару добавить кнопку поделится (share), например facebook sdk.

Но если вставляю в html, то получается, что у каждого товара одна и та же кнопка.



Как добавить к каждому товару, свою индивидуальную кнопку?

Заранее благодарен!

[warren buffet]

Как добавить к каждому товару, свою индивидуальную кнопку?

Пришей или приклей пуговицу, пуговица по-английски button, вот и кнопка на товаре.

Ладно, просто передай в хтлм id товара.

[warren buffet]

чтоб при нажатии на изображение переходило по силке.

вот так

<a href="example,com"><img src="example.com/ass.jpg"></a>

[Coriolan161]

cubano,

https://vuejs.org/guide/list.html

Inside v-for blocks we have full access to parent scope properties, plus a special variable $index which, as you probably have guessed, is the Array index for the current item:

[warren buffet]

Почему они лезут со своими фреймворками на генеральный форум программистов? У них же есть своя ТП.

[cubano]

Coriolan161 Спасибо за помощь !


Путем проб и ошибок, поучилось !

Вообще мне нужно было сделать так:

<a v-bind:href="i.url"><img v-bind:src="i.image" /></a>
<a v-bind:href="i.url0"><img v-bind:src="i.image0" /></a>

==============================================

products: [
            {
                "id": "0",
                "product": "Asus GeForce GTX 980Ti DS3 Strix",
                "price": 559.99,
                "category": "Graphics Card",
                "image": "https://www.overclockers.co.uk/media/image/thumbnail/GX388AS_119199_105x105.jpg",
            "url": "http://javascript.ru/forum/dom-window/64989-pomogite-realizovat-perekhod-po-nazhatiyu-na-izobrazhenie.html",   // <---
 
                "image0": 
"https://example.com/share-image.jpg",
                 "url0": "https://www.facebook.com/sharer.phpu=https://example.html",

                "inCart": false
            },