Issue with Storefront UI - SfComponentSelect functionality not functioning correctly

I have implemented the SfComponentSelect in my custom component, as shown in the official documentation.

However, when I select an option from the dropdown, the selected option does not appear above the label "MySelect", unlike the example provided in the official docs.

This is the code snippet from my CustomComponent.vue file:

<template>
  <SfComponentSelect label="MySelect">
    <SfComponentSelectOption
      v-for="option in optionsList"
      :key="option.value"
      :value="option.value"
      class="sort-by__option"
    >{{ option.label }}</SfComponentSelectOption>
  </SfComponentSelect>
</template>
<script>
import { SfComponentSelect } from '@storefront-ui/vue';
export default {
  name: "CustomComponent",
  components: {
    SfComponentSelect
  },
  data(){
    return {
      optionsList: [
        {
          value: "opt-1",
          label: "Option 1",
        },
        {
          value: "opt-2",
          label: "Option 2",
        }
      ]
    }
  }
};
</script>

Answer №1

Having faced some challenges with a particular issue, I was able to devise a solution.

  1. To resolve the problem, I decided to create a new component named MyNewComponent. This component includes SfComponentSelect as mixins and is copied from the template and scss of SfComponentSelect.
  2. I then defined new props and html for MyNewComponent.
  3. Finally, I utilized MyNewComponent in the following manner:

<SelectStore :label="name"
               :size="pdvLists.length"
               @change="changeLabel"
               :my-new-label="myNewLabel"
               persistent>
    <SfComponentSelectOption
      v-for="option in options"
      :key="option.value"
      :value="option.value"
      class="sort-by__option"
    >{{ option.name }}</SfComponentSelectOption>
</SelectStore>
<script>
import MyNewComponent from './MyNewComponent';

export default {
  name: "ComponentBlaBla",
  components: {
    MyNewComponent
  },
  data() {
    return {
      options: [
        {
          value: "opt1",
          name: "Opt1"
        },
        {
          value: "opt2",
          name: "Opt2"
        }
      ],
      myNewLabel: ''
    }
  },
  methods: {
    changeLabel(value){
      // Implement logic for changing label
       let selectedOption = this.options.filter((item) => value === item.value);
      this.myNewLabel = selectedOption[0].name;
    }
  }
};
</script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Graph only displays data after button is clicked

I have been working on customizing this jsfiddle to display database data. Check it out here: http://jsfiddle.net/jlbriggs/7ntyzo6u/ Using JSON, I am fetching data from my database and editing chart1 to display the database data: var chart, chartOption ...

Why are cloned jQuery elements triggering events on the parent <div> and not the child <div>?

Currently, I am working on a tool that includes dynamic input fields for user input. To create different sections, I have cloned some divs from the code successfully. However, I am facing an issue where the events attached to the parent div are triggered e ...

Bidirectional data flow in AngularJS Directives

In an effort to create a dynamic form with different "widgets" based on field types and parameters stored in a database, I have been exploring directives for handling layout changes in response to various scenarios. After experimenting with some examples, ...

What is the best way to showcase a lengthy webpage similar to that of dzone.com?

Upon visiting dzone.com, it is evident that all the posts are displayed on a single page. As we scroll down the page, older posts are dynamically added to the end of the page while posts at the beginning are potentially removed from view. I am curious abo ...

Adding TypeScript to your Vue 3 and Vite project: A step-by-step guide

After setting up my project by installing Vue and Vite using the create-vite-app module, I decided to update all the packages generated by 'init vite-app' to the latest RC versions for both Vue and Vite. Now, I am interested in using TypeScript ...

Enzyme's simulate() failing to produce expected results with onChange event

I am facing an issue with a component and its related tests: import React from 'react'; import PropTypes from 'prop-types'; function SubList (props) { var subways = ['', '1', '2', '3', & ...

React with TypeScript: The struggle of getting LocalStorage to work

Currently, I am dealing with persistence in a todo application developed using React and TypeScript. To achieve the desired persistence, I have implemented localStorage. Allow me to share some code snippets: const [todos, setTodos] = useState<todoMod ...

Retrieving Distinct Values in CouchDB

In my database, there are documents that represent different rooms. Each room has properties like "floor" and "hotel", among others. What I need to do is fetch all the floors associated with a specific hotel from the database. Something like getAllFloorsOn ...

Learn how to extract values from an object in Vue JS time-slots-generator and display either PM or AM based on the

Using the time-slots-generator package, I am able to display the time from 0:15 to 24:00. However, the issue is that this package does not have built-in functionality to display AM/PM, so I had to create a manual solution for it. To achieve this, I modifi ...

Struggling to implement dynamic templates in an Angular directive

In the process of developing a small angular application that consists of 3 modes - QA, Production, and Sandbox. In the QA mode, there are multiple buttons for users to select values which then populate "myModel". The other two modes, Production and Sandbo ...

The final marker is consistently used by the click event

Currently exploring the Google Maps API for the first time and facing a challenge in Rails when trying to add a click event for each marker. I am looping through the team_locations model to extract latitude and longitude data in order to set up markers. ...

Error encountered: Unable to compute centroids with Three.js / Collada due to an undefined value

There seems to be an issue when utilizing the ColladaLoader JavaScript, as it throws an error stating "undefined is not a function" in line 2403 of ColladaLoader.js. Despite following the example provided by simply loading the .dae file: var loader = new ...

Retrieve the concealed division element's HTML content along with its formatting

Help needed with appending a hidden div with its styles intact. Despite using the code provided below, the appended div does not retain its styles. Any suggestions for an alternative method? var warningMessage = $('#warningDiv').html() fun ...

Having trouble with your computed includes not working in Vue.js? Unsure of how to fix it?

How come when I use "includes" in Vue with my v-model, Vue.js logs an error? However, if I write (.includes("blabla)), everything works fine. What could be the issue? Also, how can I return the entire array if the (if) condition will work? For example, ...

Navigating through nested JSON objects using JavaScript

Trying to access and display a nested JSON object within the console. This is the JSON data: { "currentUser": { "image": { "png": "./images/avatars/image-juliusomo.png", "webp": "./images/avatars/image-juliusomo.webp" }, "us ...

Tips for sending a Django queryset as an AJAX HttpResponse

Currently, I am faced with the challenge of fetching a Django queryset and storing it in a JavaScript variable using Ajax. I have attempted to employ the following code snippet for this purpose; however, I keep encountering the issue of "Queryset is not J ...

utilizing AJAX to retrieve scripts from WITHIN my own domain

In the realm of ajax scripts, I encounter a scenario where referencing something within the same domain requires passing HTML and associated javascript. Due to it being a non X-domain setup, I anticipate that this could be achievable. The aim here is to fe ...

In situations where there may be a duplicate, what alternative can I utilize in place of the id attribute?

I understand that almost any element in the DOM can have an "id" attribute, and I've used it to track each client in a table of clients. Although ids should not be repeated, my rows are assigned unique identifiers based on each person's "clientId ...

Service in AngularJS designed specifically for storing and managing SEO metadata

I stumbled upon a tutorial that introduced me to using a service for dynamic SEO metadata here: However, I encountered an issue - It seems like the service is not accessible outside of the controller's view. <div ui-view></div> Here is t ...

Is Bootstrap failing to function properly in my Angular project?

During my work on an angular project, I decided to implement bootstrap CSS and js for styling. However, after completing the project, I noticed that the bootstrap was not functioning correctly. I found that when I used the CDN link in the project, the bo ...