CDL Comments - Answer Overflow

CDL

Explore posts from servers

CC#KPCKevin Powell - Community NNuxt CDCloudflare Developers

Posts Comments

KPCKevin Powell - Community

•Created by CDL on 4/30/2025 in #help

React -> Vue Comparison

That's enough of that for 1 night, that was very refreshing though!

41 replies

KPCKevin Powell - Community

•Created by CDL on 4/30/2025 in #help

React -> Vue Comparison

my computed property isn't checking the value of onSale, but my v-if is, I guess

41 replies

KPCKevin Powell - Community

•Created by CDL on 4/30/2025 in #help

React -> Vue Comparison

oh hold on I think I'm just being dumb

41 replies

KPCKevin Powell - Community

•Created by CDL on 4/30/2025 in #help

React -> Vue Comparison

I'm stumped on this part, and google sucked at helping..

const onSale = ref(true)

const onSale = ref(true)

whilst that's true, I need a message to appear showing "brand + product is on sale" which I think is something such as....

const saleMessage = computed(() => {
  return onSale.value + ' ' + product.value + ' ' + "is on sale"
})

const saleMessage = computed(() => {
  return onSale.value + ' ' + product.value + ' ' + "is on sale"
})

with

<p v-if="onSale">{{ saleMessage }}</p>

<p v-if="onSale">{{ saleMessage }}</p>

However... how do I get it to check whether onSale is true or false lol

41 replies

KPCKevin Powell - Community

•Created by CDL on 4/30/2025 in #help

React -> Vue Comparison

Forgot about the aria-disabled!

41 replies

KPCKevin Powell - Community

•Created by CDL on 4/30/2025 in #help

React -> Vue Comparison

I couldn't figure out how to turn add vue to codepen

41 replies

KPCKevin Powell - Community

•Created by CDL on 4/30/2025 in #help

React -> Vue Comparison

lmao

41 replies

KPCKevin Powell - Community

•Created by CDL on 4/30/2025 in #help

React -> Vue Comparison

but that is a hideously long URL

41 replies

KPCKevin Powell - Community

•Created by CDL on 4/30/2025 in #help

React -> Vue Comparison

https://play.vuejs.org/#eNqtVl1v2zYU/SucgEEO6lhp0rxojrEmKIYM2DosRV/qYpCla5cxRWok5cYw/N97KEoy5TrpS20YEHnPPff7yrvobVVNNjVFaTQ1ueaVZYZsXc3mkpeV0pbtmKblmOWqrGpLBduzpVYli6EU/9ajjMrX5g9NJO/LbEUtZpJkBnQm4e7SJA3qv5WDTR4rWh0T3Iqafqy/AKpXn8tcSWNZpVVR55bdOHdH8YNDxmcAePFCZ7LohB9rYn9lxpLeNpAOZEhQjhg/ZppnsuO6CCEF2YwL04o+xdcXvyI11ioZj1l8hdNXpYR7vsRzpcSWnJ34c0iy8fw9CyR2x3iRssvLqzcu10LplMVNosDVRJ8e53jM/q/Bwu02ZdcXbD8e0FwfaFy+jlj6RIck4JjLgaN5hsqcyALwgiDommI0OmM3M7ZzHmi0j5Y+4ZNNBkPsFYvxfdXVyN+Cbh9yNu69zNnlzRN8OiqXv/08aYi+Y5cPFoH/DP4uYccmsqL4oO58xjz3yOWvy8ENex2i66rILB06bcRlQU8Hl04aB66BOdP4TRM/shhWHCyVlQCnO9lpwTcsFxifm3kks835ItPzaDZNcP89wPkJqXN+tNv5su/3Z8+g2zKeF9zA4BaKDvIMCNFiYiQ56x72DLApWwACjJcrBs8Rcmp0DmyLYcmBqnfxeWK5VEPeL69niNI38X4/TXAOpBVs8qWz5nsGuveSNY/TxC3GAZKEodn72jK1PImpRXDCWXAoLZUGv98lqGi3VWAJfrXXzjHBQ6pkwOViDZk71lHbxRh431Hg7xp7HoUa6Zq2UGiFE14Mxb+XqjakNuRYB+3a9uoQ3veS2zrnOde5QKkG9ozdCgJkxxZZvl5pVcvizi+pzolGG3soUAyato18UbuFe8p4Kxma7YRILTfZQlBx28BS9ku3FgYGodIBodVhhojNOfRzwfM1IP3kD9wO4W+LglnVDFZYUO/uyWYOZq99mibBhEfjyBrM1pKvJo9GSby/sTYYc/kvKy5Iv68sx6aZR6lbKAwfOCqE+vpnc2d1TXhj+Pv8C+XrE/eP5sndzaN/NBnSGxS0l9lMrwgRO/G7h7/pCc+9sMToufK/IPyXjBK189HDbtEMcDvANd7eN38PuFx9MO+eLEnTBeUcdUj33nNo/B+5eyH0g7tXkzeNHnZotP8G38AuvQ==

41 replies

KPCKevin Powell - Community

•Created by CDL on 4/30/2025 in #help

React -> Vue Comparison

computed made the code a little larger so it's not fun to copy/paste

41 replies

KPCKevin Powell - Community

•Created by CDL on 4/30/2025 in #help

React -> Vue Comparison

I like that approach

41 replies

KPCKevin Powell - Community

•Created by CDL on 4/30/2025 in #help

React -> Vue Comparison

how odd, first time I've encountered something forcing me to use ' ' and not " " (naturally find " " easier)

                <img :class="{ 'out-of-stock-img': !inStock }" v-bind:src="image" />

                <img :class="{ 'out-of-stock-img': !inStock }" v-bind:src="image" />

41 replies

KPCKevin Powell - Community

•Created by CDL on 4/30/2025 in #help

React -> Vue Comparison

41 replies

KPCKevin Powell - Community

•Created by CDL on 4/30/2025 in #help

React -> Vue Comparison

and then you use it here

@mouseover="updateImage(variant.image)

@mouseover="updateImage(variant.image)

because it's using the parameter

const updateImage = (variantImage) => {

const updateImage = (variantImage) => {

41 replies

KPCKevin Powell - Community

•Created by CDL on 4/30/2025 in #help

React -> Vue Comparison

ah.. because you set image to the value of variantImage, ignore me.

41 replies

KPCKevin Powell - Community

•Created by CDL on 4/30/2025 in #help

React -> Vue Comparison

I'm a wee bit confused on this part.. how is variantImage working with variant.image?

<script setup>
import { ref } from 'vue';
import socksGreenImage from './assets/images/socks_green.jpeg';
import socksBlueImage from './assets/images/socks_blue.jpeg';

const product = ref('Socks');
const image = ref(socksGreenImage);
const inStock = true;

const details = ref(['50% cotton', '30% wool', '20% polyester']);

const variants = ref([
    { id: 2234, color: 'green', image: socksGreenImage },
    { id: 2235, color: 'blue', image: socksBlueImage }
]);

const cart = ref(0);

const addToCart = () => {
    cart.value += 1;
};

const updateImage = (variantImage) => {
    image.value = variantImage;
};
</script>

<template>
    <div class="nav-bar"></div>
    <div class="cart">Cart({{ cart }})</div>
    <div class="product-display">
        <div class="product-container">
            <div class="product-image">
                <img v-bind:src="image" />
            </div>
            <div class="product-info">
                <h1>{{ product }}</h1>
                <p v-if="inStock">In Stock</p>
                <p v-else>Out of Stock</p>
                <ul>
                    <li v-for="detail in details">{{ detail }}</li>
                </ul>
                <div v-for="variant in variants" :key="variant.id" @mouseover="updateImage(variant.image)">
                    {{ variant.color }}
                </div>
                <button @click="addToCart" class="button">Add to Cart</button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import socksGreenImage from './assets/images/socks_green.jpeg';
import socksBlueImage from './assets/images/socks_blue.jpeg';

const product = ref('Socks');
const image = ref(socksGreenImage);
const inStock = true;

const details = ref(['50% cotton', '30% wool', '20% polyester']);

const variants = ref([
    { id: 2234, color: 'green', image: socksGreenImage },
    { id: 2235, color: 'blue', image: socksBlueImage }
]);

const cart = ref(0);

const addToCart = () => {
    cart.value += 1;
};

const updateImage = (variantImage) => {
    image.value = variantImage;
};
</script>

<template>
    <div class="nav-bar"></div>
    <div class="cart">Cart({{ cart }})</div>
    <div class="product-display">
        <div class="product-container">
            <div class="product-image">
                <img v-bind:src="image" />
            </div>
            <div class="product-info">
                <h1>{{ product }}</h1>
                <p v-if="inStock">In Stock</p>
                <p v-else>Out of Stock</p>
                <ul>
                    <li v-for="detail in details">{{ detail }}</li>
                </ul>
                <div v-for="variant in variants" :key="variant.id" @mouseover="updateImage(variant.image)">
                    {{ variant.color }}
                </div>
                <button @click="addToCart" class="button">Add to Cart</button>
            </div>
        </div>
    </div>
</template>

41 replies

KPCKevin Powell - Community

•Created by CDL on 4/30/2025 in #help

React -> Vue Comparison

yeah meant the destructuring

41 replies

KPCKevin Powell - Community

•Created by CDL on 4/30/2025 in #help

React -> Vue Comparison

ah sure, that makes sense, similar visual to

export default function CoreConcept({ title, image, description }) {
    return (
        <li>
            <img src={image} alt={title} />
            <h3>{title}</h3>
            <p>{description}</p>
        </li>
    );
}

export default function CoreConcept({ title, image, description }) {
    return (
        <li>
            <img src={image} alt={title} />
            <h3>{title}</h3>
            <p>{description}</p>
        </li>
    );
}

41 replies

KPCKevin Powell - Community

•Created by CDL on 4/30/2025 in #help

React -> Vue Comparison

I was only aware of :id :class to be honest, I didn't think v-bind was used outside of that

41 replies

KPCKevin Powell - Community

•Created by CDL on 4/30/2025 in #help

React -> Vue Comparison

hahaha

41 replies

Gaming

Programming