Vue.js数据绑定问题排查：含绑定代码及Webpack Mix配置疑问

Hey there, let's work through your Vue data binding and Webpack Mix issues step by step:

Looking at your img tag's :src binding, there are two clear issues:

• Ternary operator syntax error: Your current code writes the condition as (isTestURL && isPosted) ? '~/img/'+ 'testflow-img':'' + '.png' — this means when the condition fails, the src becomes '' + '.png' (aka .png), which will trigger a bad request for an invalid image path. You should move the .png extension into the valid path and leave the else branch empty:

  <img :src="(isTestURL && isPosted) ? '~/img/testflow-img.png' : ''" class="img-fluid" />
  

• ~ path resolution: In Webpack-based projects, ~ is an alias that needs explicit configuration to map to your asset directory — it won't work out of the box.

If you're using Laravel Mix (Webpack Mix), add an alias to your webpack.mix.js file so Webpack can correctly resolve the ~ path to your project's assets:

const mix = require('laravel-mix');
const path = require('path'); // Don't forget to require path

mix.webpackConfig({
    resolve: {
        alias: {
            '~': path.resolve(__dirname, 'resources/assets/') // Adjust this path to match your actual asset folder (e.g., 'src/assets/' if you're not using Laravel)
        }
    }
});

// Rest of your Mix configuration (e.g., mix.js(), mix.sass())

Make sure the variables used in your binding are properly defined in your Vue instance's data (or setup() if using Composition API) to ensure reactivity:

// Options API example
new Vue({
    el: '#app',
    data() {
        return {
            isTestURL: false, // Set initial value based on your logic
            isPosted: false,
            tests: [] // Ensure this array is initialized and populated with data
        }
    },
    // Don't forget to include your router if using Vue Router
    router: yourRouterInstance
});

Also, always add a :key to your v-for loop for better performance and to avoid rendering bugs:

<div class="row" v-for="test in tests" :key="test.id">

Ensure your test.index route is correctly registered and accepts the id param in your router configuration:

const router = new VueRouter({
    routes: [
        {
            name: 'test.index',
            path: '/test/:id', // The :id here matches the param in your router-link
            component: TestIndexComponent // Replace with your actual component
        }
    ]
});

内容的提问来源于stack exchange，提问作者Willing Master