Константин

Гуглите ajax отправка формы

Примерный код:

function send_form(form_id) {
    var form = $('#'+form_id);
    var msg   = form.serialize();
    $.ajax({
        type: 'POST',
        url: '../handlers/hSentEmailCall.php', // Обработчик собственно
        data: msg,
        success: function(data) {
            // запустится при успешном выполнении запроса и в data будет ответ скрипта
        },
        error:  function(){
            alert('Ошибка!');
        }
    });

}

Запускать при помощи onclick:

<a href="#" class="add" onclick='send_form('add')'>Добавить</a>

Самое простое решение

ingredients = Food.objects.values('id', 'title').filter(title__icontains=name)
return JsonResponse({'ingredients': list(ingredients)})

1. useDispatch - получение функции store.dispatch в компоненте. Раньше для вызова action функциональный компонент приходилось оборачивать в вызов connect:

const Foo = ({ dispatch }) => {
  const handler = useCallback(() => {
    dispatch(action());
  }, []);

  return (
    <Bar onClick={handler} />
  );
};

export default connect()(Foo);

Сейчас:

const Foo = () => {
  const dispatch = useDispatch();

  const handler = useCallback(() => {
    dispatch(action());
  }, []);

  return (
    <Bar onClick={handler} />
  );
};

export default Foo;

2. useSelector - маппинг значения из store.
Раньше:

const Foo = ({ value }) => {
  return (
    <Bar value={value} />
  );
};

const mapStateToProps = state => ({
  value: state.value,
});

export default connect(mapStateToProps)(Foo);

const Foo = () => {
  const value = useSelector(state => state.value);

  return (
    <Bar value={value} />
  );
};

export default Foo;

3. useStore - получение store целиком:

const valueSelector = state => state.value;

const Foo = () => {
  const { dispatch, getState, subscribe } = useStore();
  const value = valueSelector(getState());
  
  useEffect(() => subscribe(console.log), []);

  const handler = useCallback(() => {
    dispatch(action());
  }, []);

  return (
    <Bar onClick={handler} value={value} />
  );
};

export default Foo;

Вряд ли useStore вам, действительно, понадобится на практике.

у вас порядок инициализации неправильный. разбейте лучше все по файлам

// i18n.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import english from '@/lang/english.js'
import russian from '@/lang/russian.js'

Vue.use(VueI18n)

let messages = {
    en : english,
    ru : russian,
}

export default new VueI18n({
    //locale: 'ru',
    locale: window.localStorage.Language || 'ru',

    fallbackLocale: 'ru',
    messages
})

// router.js
...
import i18n from '@/path/to/i18n.js'
...
{
    path: '/about',
    component: About,
    meta: { title: i18n.t('about') }
}

// main.js
import Vue from 'vue'
import App from './App'
import Vuetify from 'vuetify'
import router from './router'
import axios from 'axios'
import store from './store';
import i18n from '@/path/to/i18n.js'

Vue.config.productionTip = false

Vue.use(Vuetify)

Vue.axios = Vue.prototype.$http = axios.create({
    baseURL: 'http://localhost:5000/api'
})


/* eslint-disable no-new */
new Vue({
    el: '#app',
    i18n,
    router,
    store,
    components: { App },
    template: '<App/>',
    created() {
      this.$vuetify.theme.primary = '#01579B'
    }
})

Вот что заставляет постить код картинками? Капец...
По делу: напишите так -

<span v-if="loadProduct">{{ loadProduct.price }}</span>